为什么选择 UnoCSS即时按需原子化 CSS 引擎的设计理念与选型对比【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocssUnoCSS 是一个即时、按需生成的原子化 CSS 引擎核心定位是灵活且可扩展引擎本身不带任何立场所有 CSS 工具类utilities均由 preset 提供。本文以仓库文档 docs/guide/why.md 为主线深入讲解 UnoCSS 的诞生动机、它与 Windi CSS 的血缘传承以及与 Tailwind CSS 在设计目标上的本质差异并结合仓库源码与配置实例帮助你在选型时做出有依据的判断。一、UnoCSS 的出发点重新想象原子化 CSSUnoCSS 的作者 Anthony Fu 在其博客文章《Reimagine Atomic CSS》中系统阐述了项目的原始动机。要理解为什么会有 UnoCSS首先要理解原子化 CSS 生态在 UnoCSS 出现之前所面临的两大痛点生成方式不够即时传统工具链往往需要完整扫描、预编译或运行期转换无法做到真正的用到才生成扩展性受限多数方案把工具类集与引擎耦合在一起用户很难脱离框架既定的约定构建属于自己的设计体系。UnoCSS 正是针对这两个问题重新设计的。它的核心理念在 docs/guide/index.md 中表述得非常直白UnoCSS 是即时instant原子化 CSS 引擎被设计为灵活且可扩展。核心不带任何立场所有 CSS 工具类均由 presets 提供。从仓库目录结构也可以直观印证这一点引擎本体位于 packages-engine/core只包含config.ts、generator.ts、types.ts、extractors、utils等基础模块本身不含任何具体的 CSS 规则而所有规则、变体、快捷方式都被拆分到 packages-presets 下的各个 preset 包中。这种引擎与规则彻底解耦的架构是 UnoCSS 一切设计决策的总根源。二、与 Windi CSS 的关系精神继承者而非简单分支2.1 出身与定位UnoCSS 由 Windi CSS 团队成员发起大量灵感来自 Windi CSS 的工作成果。截至 2023 年 3 月Windi CSS 已不再积极维护因此 UnoCSS 可以被视为 Windi CSS 的精神继承者spiritual successor。这一点在 docs/guide/why.md 中有明确陈述。2.2 继承的特性UnoCSS 完整继承了 Windi CSS 的核心能力这些特性在文档与源码中均有对应实现按需生成on-demand只有代码中真正使用到的工具类才会生成 CSS未使用的不产生任何输出Attributify 模式见 docs/presets/attributify.md实现位于 packages-presets/preset-attributify/src快捷方式Shortcuts见 docs/config/shortcuts.md将多个规则合并为一个简写支持静态对象与动态RegExp匹配两种形式变体组Variant Groups见 docs/transformers/variant-group.md例如hover:(bg-gray-400 font-medium)会被转换为hover:bg-gray-400 hover:font-medium编译模式Compile Class见 docs/transformers/compile-class.md将一组类编译合并为单一类名。2.3 在继承之上的创新在 Windi CSS 的基础之上UnoCSS 从零开始构建把最大可扩展性与性能作为首要目标因此能够引入大量全新的特性纯 CSS 图标Pure CSS Icons以i-前缀 集合名 图标名的约定使用任何图标见i-carbon-sun、i-mdi-alarm等用法无值 AttributifyValueless Attributifydiv m-2 rounded text-teal-400 /无需class属性即可生效Tagify 模式把工具类直接写成 HTML 标签如text-red red text /text-redWeb 字体Web Fonts对 Google Fonts 等字体源的自动加载支持。2.4 最关键的区别被抽离为独立的原子化 CSS 引擎UnoCSS 与 Windi CSS 最本质的区别在于UnoCSS 被抽离成了一个纯粹的原子化 CSS 引擎。这意味着所有特性都是可选的按需组合用户可以轻松创建自己的约定、自己的设计系统、自己的 preset官方提供了开箱即用的 preset 集同时社区也沉淀了大量 社区 preset。在 docs/guide/index.md 中可以看到这种自定义规则的最低成本路径在uno.config.ts中定义一条规则m-1即可被识别并生成.m-1 { margin: 1px; }将匹配器换成RegExp、规则体换成函数后m-1、m-100、m-52.43这类任意数值 margin 工具类都可以即时生成import { defineConfig } from unocss export default defineConfig({ rules: [ [/^m-([\.\d])$/, ([_, num]) ({ margin: ${num}px })], ], })进一步地将若干规则提取成Preset对象即可封装为团队共享的设计系统 presetimport { Preset } from unocss export const myPreset: Preset { name: my-preset, rules: [ [/^m-([.\d])$/, ([_, num]) ({ margin: ${num}px })], [/^p-([.\d])$/, ([_, num]) ({ padding: ${num}px })], ], variants: [/* ... */], shortcuts: [/* ... */], // ... }import { defineConfig } from unocss import { myPreset } from ./my-preset export default defineConfig({ presets: [ myPreset, // your own preset ], })三、与 Tailwind CSS 的对比不同的设计目标非简单的同类竞争3.1 定位差异PostCSS 插件 vs 同构引擎Windi CSS 和 UnoCSS 都从 Tailwind CSS 中汲取了大量灵感但两者的设计目标截然不同因此苹果对苹果的直接比较并不成立。文档中明确列出了几个关键差异Tailwind CSS 是一个 PostCSS 插件而 UnoCSS 是一个同构isomorphic引擎并附带一系列与构建工具的一等集成包括 PostCSS 插件。同构引擎意味着同一套引擎既能在 Node.js 端运行也能在浏览器端运行从而带来两方面的直接收益使用场景更灵活例如 CDN Runtime只需在index.html引入一行脚本即可在浏览器中实时检测 DOM 变化并即时生成样式script srchttps://cdn.jsdelivr.net/npm/unocss/runtime/script该 runtime 的实现位于 packages-integrations/runtime/src其浏览器端构建会自动扫描 DOM 变更并增量生成 CSS。与构建工具的深度集成带来更好的 HMR、性能与开发体验例如 Inspector它允许你检视每个文件生成的 CSS 规则与已应用的类还内置一个基于当前配置的 REPL 来实时测试工具类。Inspector 的实现位于 packages-integrations/inspector。从源码结构看UnoCSS 的集成层非常丰富除 Vite 外还覆盖了 Astro、Nuxt、Webpack、Next.js、Svelte Scoped、CLI、ESLint 等对应的集成包均位于 packages-integrations 目录下并在 docs/guide/packages.md 中汇总列出。3.2 扩展性与定制自由度完全可扩展 vs 强约定文档明确指出抛开技术权衡不谈UnoCSS 被设计为完全可扩展、可定制而 Tailwind CSS 则更强约定opinionated。在 Tailwind CSS 上构建自定义设计系统或设计令牌比较困难且难以脱离其既有约定在 UnoCSS 上可以几乎随心所欲地构建任何东西并拥有完全控制权。最有力的实证是整个 Tailwind CSS 兼容工具类集被 UnoCSS 实现为单个 preset即 Wind3 preset源码位于 packages-presets/preset-wind3/src。也就是说UnoCSS 并不是把 Tailwind 语法焊接进引擎而是以 preset 的形式平铺在引擎之上——用户完全可以不加载它改用 preset-mini、自己写的 preset或社区中基于其他哲学实现的 社区 preset。此外docs/guide/packages.md 中的包清单展示了这种可选性的全貌例如unocss/preset-attributify、unocss/preset-tagify、unocss/preset-icons、unocss/preset-web-fonts、unocss/preset-typography虽然都随unocss聚合包分发但默认不启用必须显式加入presets数组才生效——这正体现了所有特性可选的设计哲学。3.3 创新实验能力灵活性的直接红利正是这种灵活性使 UnoCSS 能够在引擎之上大胆实验一系列创新特性文档中列出的包括纯 CSS 图标Pure CSS IconsAttributify 模式变体组Variant Groups快捷方式ShortcutsTagifyWeb 字体Web FontsCDN RuntimeInspector其中纯 CSS 图标的思路很有代表性在 docs/presets/icons.md 中图标以prefixcollection-icon或prefixcollection:icon的约定直接作为类名使用例如i-carbon-sun、i-mdi-alarm text-orange-400无需引入字体文件或 SVG 组件图标以 CSSmask或背景图方式渲染可随text-*工具类直接着色与缩放。3.4 明确的取舍不支持 Tailwind 插件体系由于设计目标不同UnoCSS不支持 Tailwind CSS 的插件系统与配置体系。这意味着从一个深度定制了 Tailwind 插件的项目中迁移到 UnoCSS 可能会更困难这是官方有意为之的决策目的是保证 UnoCSS 的高性能与可扩展性。文档给出的结论是我们认为这个取舍是值得的——在选型时你需要评估自己的项目是否重度依赖 Tailwind 插件生态如果答案是肯定的迁移成本是需要正视的现实约束。四、总结从为什么到怎么选围绕为什么选择 UnoCSS可以归纳出三条主线对比维度与 Windi CSS与 Tailwind CSS关系精神继承者继承 on-demand、attributify、shortcuts、variant groups、compile class 等特性同为原子化 CSS 思想的受益者但设计目标不同本质差异被抽离为独立引擎特性全部可选PostCSS 插件 vs 同构引擎 构建工具一等集成扩展性可自由创建自己的约定、设计系统与 preset完全可扩展、无强约定Tailwind 侧更opinionated创新引入纯 CSS 图标、无值 attributify、tagify、web fonts 等可在引擎之上实验 CDN Runtime、Inspector 等能力代价—不支持 Tailwind 插件体系重度定制项目迁移成本更高选型建议如果你的诉求是沿用 Tailwind 语法的低迁移成本UnoCSS 的 Wind3 preset 提供了整套兼容工具类如果你的诉求是构建自己的设计系统、自定义约定或需要 CDN 运行、深度 HMR 等场景UnoCSS 的引擎化架构正是为此设计。仓库内的 examples 目录收录了 Astro、Next.js、Nuxt、SvelteKit、Vite React/Vue/Solid 等大量真实示例可以在动手前直接对照参考。在浏览器中也可以通过 Playground 交互式文档 即时体验与查阅默认 preset 中的工具类。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考