為什麼選擇 UnoCSS?
動機
我們推薦你閱讀 UnoCSS 的創始人 Anthony Fu 撰寫的博客文章 重新想象原子 CSS,以更好地理解 UnoCSS 背後的動機。
UnoCSS 與其他工具有何不同?
Windi CSS
UnoCSS 由 Windi CSS 團隊的成員啟動,從我們在 Windi CSS 中的工作中獲得了很多靈感。雖然 Windi CSS 不再被積極維護(截至 2023 年 3 月),你可以將 UnoCSS 視為 Windi CSS 的"精神繼承者"。
UnoCSS 繼承了 Windi CSS 的按需特性、屬性模式、快捷方式、變體組、編譯模式等諸多特性。在此基礎上,UnoCSS 從頭開始構建,最大限度地考慮了可擴展性和性能,使我們能夠引入諸如純 CSS 圖標、無值屬性、標籤化、Web 字體等新功能。
最重要的是,UnoCSS 被提取為一個原子 CSS 引擎,所有功能都是可選的,並且可以輕鬆創建你自己的約定、設計系統和預設 - 通過組合你想要的功能。
Tailwind CSS
Windi CSS 和 UnoCSS 都從 Tailwind CSS 獲得了很多靈感。由於 UnoCSS 是從頭開始構建的,我們能夠全面瞭解原子 CSS 是如何設計的,並將其抽象為優雅而強大的 API。由於設計目標有很大不同,與 Tailwind CSS 的比較並不完全公平。但我們將嘗試列出一些差異。
Tailwind CSS 是一個 PostCSS 插件,而 UnoCSS 是一個同構引擎,具有與構建工具的一流集成(包括 PostCSS 插件)。這意味著 UnoCSS 可以更靈活地在不同地方使用(例如,CDN 運行時,可以即時生成 CSS),並且可以與構建工具深度集成,提供更好的熱模塊替換(HMR)、性能和開發體驗(例如 檢查器)。
除了技術權衡,UnoCSS 還被設計為完全可擴展和可自定義,而 Tailwind CSS 則更加固執己見。在 Tailwind CSS 上構建自定義設計系統(或設計標記)可能很困難,而且你無法真正偏離 Tailwind CSS 的約定。使用 UnoCSS,你可以完全控制地構建幾乎任何你想要的東西。例如,我們在單個預設中實現了全部 Tailwind CSS 兼容的實用工具,並且還有許多使用其他有趣理念實現的精彩社區預設。
得益於 UnoCSS 提供的靈活性,我們能夠在其基礎上嘗試許多創新功能,例如:
由於與 Tailwind CSS 的設計目標不同,UnoCSS 不支持 Tailwind CSS 的插件系統或配置,這可能會使從高度定製的 Tailwind CSS 項目遷移變得更加困難。這是為了使 UnoCSS 高性能和可擴展而做出的有意決定,我們相信這種權衡是值得的。