跳至內容

為何選擇 UnoCSS?

動機

我們建議您閱讀 UnoCSS 創作者 Anthony Fu 撰寫的部落格文章 重新構想原子 CSS,以更深入地了解 UnoCSS 背後的動機。

UnoCSS 與 X 有何不同?

Windi CSS

UnoCSS 由 Windi CSS 團隊成員之一發起,並從我們在 Windi CSS 中的工作中汲取了許多靈感。雖然 Windi CSS 已不再積極維護(截至 2023 年 3 月),但您可以將 UnoCSS 視為 Windi CSS 的「精神繼承者」。

UnoCSS 繼承了 Windi CSS 的隨需特性、Attributify 模式捷徑變體群組編譯模式 等等。除此之外,UnoCSS 從頭開始構建,並以最大的可擴展性和效能為目標,使我們能夠引入諸如 純 CSS 圖示無值的 AttributifyTagify網頁字型 等新功能。

最重要的是,UnoCSS 作為一個原子 CSS 引擎被提取出來,其中所有功能都是可選的,並且可以輕鬆地創建您自己的約定、您自己的設計系統和您自己的預設集 - 並結合您想要的功能。

Tailwind CSS

Windi CSS 和 UnoCSS 都從 Tailwind CSS 中汲取了大量的靈感。由於 UnoCSS 是從頭開始構建的,因此我們能夠很好地了解原子 CSS 如何通過先前的技術設計並抽象成一個優雅且強大的 API。由於設計目標截然不同,因此與 Tailwind CSS 的比較並非apples-to-apples 的比較。但我們將嘗試列出一些差異。

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 具有高效能和可擴展性而做出的有意決定,我們相信這種權衡是值得的。

依 MIT 授權條款發行。