'正好及时” CSS

Atomic CSS 的兴起及其“即时”编译：一种新的 CSS 书写方式

acss.io 被认为是首个采用“原子 CSS”概念的项目，其核心在于 CSS 的编译。你只需这样编写 CSS：

<code><div>
  text
</div></code>

它就会生成类似这样的 CSS：

<code>.C\(\#333\) {
  color: #333;
}
.P\(20px\) {
  padding: 20px;
}</code>

(或类似的代码)。

关键在于，它只生成你实际需要的 CSS，不多不少。最终生成的 CSS 代码量远小于普通样式表。

这种编译过程被称为“即时”（Just in Time）CSS。

流行的 Tailwind 框架也支持这种方式。对我来说，这颠覆了 Tailwind 的思维模式。它并非提供大量的 CSS 实用类，然后“清除”未使用的部分，而是从一开始就只创建必要的 CSS。

我认为“即时”CSS 的概念正在流行。我最近看到了 Assembler CSS，它非常注重这一点。它不像使用类那样，而是像这样：

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  Submit
</div></code>

我对这种方式有些矛盾。一方面，我喜欢它无需离开模板就能完成样式设置的方式，尤其喜欢它生成的 CSS 代码量极少，因为 CSS 是阻塞资源。但另一方面，我不喜欢它对 CSS 本身进行了限制性的抽象，让你受制于工具对 CSS 原生功能的支持程度。它也使 HTML 看起来有点复杂——尽管我已经习惯了 JSX 中的内联事件处理程序之类的东西。

以上是'正好及时” CSS的详细内容。更多信息请关注PHP中文网其他相关文章！