自動生成的原子CSS

羅賓·韋瑟（Robin Weser）探索原子CSS中速寫長束困境的探索突顯了自動將HTML和CSS轉換為優化樣式的挑戰。核心問題在於處理由速記和Longhand CSS屬性相互作用引起的邊緣案例，從而在使用產生原子類的Fela之類的框架時會導致潛在的錯誤。

原子CSS的概念（一個班級，一項工作）很有趣。考慮此示例：

 <code>.mb-8 { margin-bottom: 2rem; }</code>

想像成千上萬的這樣的課程，幾乎涵蓋了每個CSS的可能性。

為什麼使用原子CSS？存在幾個令人信服的原因：

• 減少的CSS：消除重複的屬性/價值對和特定於作者的類名稱可顯著收縮最終的CSS文件大小。這是至關重要的，因為CSS是阻止資源。
• 簡化的命名：不再需要耗時的班級名稱頭腦提示。
• 設計一致性：限制可用類可實施一定程度的設計統一性。
• 開發人員速度提高：一些開發人員發現這種方法更快，更有效。

可以手動完成生成原子CSS（GitHub和Facebook分別使用Primer和FB5完成，儘管不一定建議使用），也可以使用預構建的框架。 Tachyons是大量原子類集合的早期例子。

但是， Tailwind CSS是主要的球員。它的優勢在於：

• 可配置性：自定義類以滿足您的項目需求。
• 清除未使用的課程：這個關鍵步驟刪除了未使用的類，實現了原子CSS的全部性能優勢。
• 內置的UI庫：使用隨時可用的組件加速開發。

但是，自動生成原子CSS呢？

Yahoo的方法使用函數作為在構建步驟中處理的類名稱，預示了當前方法。這類似於par purgecss組合。

今天，您無需手動編寫原子CSS。正如Weser指出的那樣，Fela，Styletron，React Native Web，Otion和Stylesheet等庫可以使您在構建過程中生成原子CSS時以熟悉的方式編寫樣式。這種方法可最大化可重複性，並最大程度地減少CSS捆綁包大小。每個屬性值對僅渲染一次，從而提高效率。

這種方法通常植根於CSS-IN-JS，同時處理標記和CSS以獲得最佳結果。這是手動編寫原子CSS的令人信服的替代方法，包括作者在內的許多開發人員都發現吸引力較小。關鍵好處是自動化優化，以改善Web性能。

問題仍然存在：您對這種方法有何看法？

以上是自動生成的原子CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！