为什么选择UnoCSS?
动机
我们建议您阅读博客文章 Reimagine Atomic CSS由UnoCSS的创建者撰写Anthhony Fu,以更好地了解UnoCSS背后的动机。
UnoCSS不同于其他的吗?
Windi CSS
UnoCSS是由一个Windi CSS的团队成员,从我们在Windi CSS中所做的工作中获得了很多灵感。虽然Windi CSS不再积极维护(截至2023年3月),但您可能会将UnoCSS视为Windi CSS的"精神继承者"。
UnoCSS继承了Windi CSS的按需特性,属性模式、快捷键、变体组、编译模式等等。除此之外,UnoCSS是从头开始构建的,考虑到了最大的可扩展性和性能,使我们能够引入新功能,如[纯CSS图标](/presets/icons)、[无值归因](/presets/attributify#valueless attributify)、标签化、网络字体等。
最重要的是,UnoCSS被提取为一个原子CSS引擎,其中所有功能都是可选的,并使您可以轻松创建自己的约定、自己的设计系统和自己的预设-使用所需功能的组合。
Tailwind CSS
Windi CSS和UnoCSS都从Tailwind CSS中获得了很多灵感. 由于UnoCSS是从头开始构建的,我们能够很好地概述原子CSS是如何利用现有技术设计的,并将其抽象为优雅而强大的API。由于设计目标截然不同,与Tailwind CSS相比,这并不是一个真正的苹果对苹果的比较。但我们将尝试列出一些不同之处。
Tailwind CSS是一个PostCSS插件,而UnoCSS是一个同构引擎,具有一系列与构建工具的一流集成(包括PostCSS plugin)。这意味着UnoCSS可以更灵活地在不同的地方使用(例如,CDN Runtime,它可以动态生成CSS),并与构建工具进行深度集成,以提供更好的HMR、性能和开发人员体验(例如,Inspector)。
抛开技术权衡不谈,UnoCSS的设计也是完全可扩展和可定制的,而Tailwind CSS则更具主见。在Tailwind CSS之上构建一个自定义的设计系统(或设计令牌)可能很困难,而且你不能真正脱离Tailwind CSS的约定。使用UnoCSS,您可以在完全控制的情况下构建几乎任何您想要的东西。例如,我们在单个预设,中实现了整个Tailwind CSS兼容实用程序,还有很多awesome预设是用其他有趣的哲学实现的。
由于UnoCSS提供的灵活性,我们能够在其基础上尝试许多创新功能,例如:
由于与Tailwind CSS的设计目标不同,UnoCSS不支持Tailwind CSS的插件系统或配置,这意味着它可能会使从高度定制的TailwindCSS项目迁移变得更加困难。这是旨在使UnoCSS具有高性能和可扩展性的决定,我们认为这种权衡是值得的。