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中文網其他相關文章！
