“即时” CSS

我相信 acss.io 是“原子 CSS”的首次使用，其核心在于成为一个编译器。您像这样编写 CSS

<div class="C(#333) P(20px)">
  text
</div>

它将生成如下 CSS

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

（或类似的东西。）

关键在于它只生成您实际需要的 CSS，因为您请求了它，不多也不少。结果的 CSS 比您在普通样式表中看到的要少得多。

这个编译过程被称为“即时” CSS。

流行的 Tailwind 框架 支持它。在我看来，它有点颠覆了 Tailwind 的思维模式。它不是提供一大堆 CSS 实用程序类供使用，然后“清除”未使用的部分，而是从一开始就只创建它需要的东西。

我想说“即时”是一个正在流行的概念。我刚刚看到了 Assembler CSS，它非常重视这一点。您无需使用类，而是执行以下操作

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

我对这些东西有点犹豫。我的一部分喜欢您无需离开模板即可完成样式设置的方式。我尤其喜欢极简的 CSS 输出，因为 CSS 是一种阻塞资源。但我的一部分不喜欢它对 CSS 本身进行了有限的抽象，因此您需要依靠工具来支持 CSS 本身可以实现的功能。它还会使 HTML 看起来稍微难看一些——尽管我肯定已经习惯了 JSX 内联事件处理程序之类的东西。