为什么选择 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 高性能和可扩展而做出的有意决定,我们相信这种权衡是值得的。