Skip to content

为什么选择 UnoCSS?

动机

我们建议您阅读 UnoCSS 的创建者 Anthony Fu 撰写的博客文章 Reimagine Atomic CSS,以更好地理解 UnoCSS 背后的动机。

UnoCSS 与其他框架有何不同?

Windi CSS

UnoCSS 由 Windi CSS 团队成员之一创建,从我们在 Windi CSS 中的工作中获得了很多灵感。虽然 Windi CSS 已不再积极维护(截至2023年3月),但您可以将 UnoCSS 视为 Windi CSS 的"精神继承者"。

UnoCSS 继承了 Windi CSS 的按需特性、属性化模式快捷方式变体组编译模式等诸多功能。此外,UnoCSS 从零开始构建,着重考虑最大的可扩展性和性能,使我们能够引入新功能,如纯 CSS 图标无值属性化标签化网络字体等。

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