为什么要选择 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 图标、无值 attributify、tagify、网页字体 等。
最重要的是,UnoCSS 被提取为一个原子 CSS 引擎,其中所有功能都是可选的,这使得它很容易创建自己的约定、自己的设计系统和自己的预设 - 通过你想要的功能组合来实现。
Tailwind CSS
Windi CSS 和 UnoCSS 都从 Tailwind CSS 中获得了许多灵感。由于 UnoCSS 是从头开始构建的,因此我们能够很好地了解原子 CSS 如何通过先前的艺术设计并抽象成一个优雅而强大的 API。由于设计目标截然不同,与 Tailwind CSS 并不完全是苹果与苹果的比较。但我们会尝试列出一些差异。
Tailwind CSS 是一个 PostCSS 插件,而 UnoCSS 是一个同构引擎,它包含了与构建工具的一系列一流集成(包括一个 PostCSS 插件)。这意味着 UnoCSS 可以在不同的位置更加灵活地使用(例如,CDN 运行时,它可以动态生成 CSS),并与构建工具深度集成,以提供更好的 HMR、性能和开发体验(例如,Inspector)。
抛开技术上的权衡不谈,UnoCSS 还旨在完全可扩展和可定制,而 Tailwind CSS 则更具见解性。在 Tailwind CSS 之上构建自定义设计系统(或设计令牌)可能很困难,而且你无法真正摆脱 Tailwind CSS 的约定。使用 UnoCSS,你可以完全控制地构建几乎任何你想要的东西。例如,我们在 一个预设 中实现了整个与 Tailwind CSS 兼容的实用程序,并且有许多 很棒的社区预设 使用其他有趣的设计理念实现。
由于 UnoCSS 提供的灵活性,我们能够在它之上试验许多创新的功能,例如
由于与 Tailwind CSS 的设计目标不同,UnoCSS 不支持 Tailwind CSS 的插件系统或配置,这意味着从高度定制的 Tailwind CSS 项目迁移可能会更加困难。这是为了使 UnoCSS 高性能和可扩展而做出的有意决定,我们相信这种权衡是值得的。