'正好及時” 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中文網其他相關文章！