UnoCSS学习总结

✨ 为什么开始用 UnoCSS？

在参与一个大屏项目的时候，页面上的元素特别多，各种图表、地图、动画，样式堆得一大坨。最开始我还是用传统的写法 —— scss 和 className 去管理样式，后来越写越发现：

样式文件越来越臃肿，重复代码一大堆；
改动个样式还得切来切去，看着都烦；
一套样式写完发现页面构建出来好几百 KB，太不优雅了。

然后我就开始琢磨是不是该找个更轻便的解决方案，在和组长的商量的时候发现了 UnoCSS 这个工具。

它主打的是「即时原子化」，也就是说你写什么类名它就生成什么样式，像 text-18px、bg-#123456 这样的类名直接写上去就能用，根本不需要提前写在 CSS 文件里，省事多了！

用上 UnoCSS 之后，开发节奏真的变快了，而且打包出来的 CSS 大大缩小，整个项目都轻快不少。后面我还专门研究了下 Uno 的 preset 和规则系统，越用越顺手。

📌 什么是 UnoCSS？

UnoCSS 是一款即时按需原子化 CSS 引擎，由 Anthony Fu 开发。不同于传统 CSS 框架（如 TailwindCSS），UnoCSS 不需要扫描类名生成预构建的 CSS 文件，而是 按需实时生成样式规则，具有更强的灵活性和性能表现。

它属于“原子化 CSS”的范畴，但提供了更强的规则配置能力、插件机制和构建优化支持。

✨ 核心优势

按需生成样式（On-demand）：不生成未使用的类，零冗余。
极速启动与构建：几乎不需要扫描文件，速度极快。
极致灵活：可以自定义规则、变体、快捷方式（shortcuts）等。
完整兼容 Tailwind 原子类名，并支持 WindiCSS、Bootstrap 等风格。
支持 Vue / React / Svelte / Vite / Nuxt 等主流框架。

🚀 安装与配置

1. 安装依赖（以 Vite 项目为例）

1	npm install unocss -D

2. 添加插件到 `vite.config.ts`

import UnoCSS from 'unocss/vite'

export default {
  plugins: [UnoCSS()]
}

3. 创建 `uno.config.ts`

import { defineConfig, presetUno, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),           // 默认预设
    presetAttributify()    // 支持属性语法
  ],
  shortcuts: {
    'btn': 'px-4 py-1 rounded bg-blue-500 text-white hover:bg-blue-600'
  }
})

🔧 常用语法示例

原子类写法（和 Tailwind 类似）

1	<div class="text-lg font-bold text-center text-red-500 hover:text-red-700"></div>

属性语法（需要 presetAttributify）

1	<div text="center red-500 hover:red-700" font="bold" />

自定义快捷方式（shortcuts）

shortcuts: {
  'card': 'p-4 rounded shadow bg-white',
  'btn': 'px-4 py-2 rounded bg-primary text-white hover:bg-primary-dark'
}

响应式与伪类支持

1	<div class="md:hover:bg-blue-100 dark:bg-gray-800"></div>

🧠 使用心得与场景

在我参与的项目中，部分项目使用了 UnoCSS 来提升样式维护效率。我的实际体会包括：

开发体验丝滑：无需手写样式，所有样式通过类名组合完成。
调试更高效：类名即样式，查看结构即可理解样式含义。
项目体积更小：构建后只包含实际使用的样式类。
可读性略差：对于不熟悉原子化命名规则的新手存在一定门槛。
建议搭配 VSCode 插件使用，如 UnoCSS IntelliSense，提升补全体验。

📦 常见问题

Q1：为什么我添加的类没有生效？

可能是没有正确安装 UnoCSS 插件，或类名拼写错误、写在了不被识别的文件中。

Q2：如何添加自定义颜色或字体？

theme: {
  colors: {
    primary: '#3b82f6',
    secondary: '#64748b'
  },
  fontFamily: {
    sans: 'Inter, sans-serif'
  }
}

Q3：和 Tailwind CSS 相比如何选择？

项目	UnoCSS	TailwindCSS
启动性能	🚀 极速	中等（需预编译）
配置灵活性	✅ 极高	中等（受限于配置结构）
社区生态	👶 成长中	🌳 成熟强大
插件支持	✅ 丰富	✅ 丰富

🔚 总结

总的来说，UnoCSS 真的是个“用过就回不去”的工具，特别适合像我这种既想写得快又不想牺牲页面性能的前端选手。它不光让样式开发变得更“即时”，还减少了很多重复劳动，页面打包出来也轻很多。

如果你之前用过 TailwindCSS，那你上手 UnoCSS 基本没门槛；如果你还没用过类似原子化框架，那 Uno 就是一个非常不错的起点，配置自由、体验也好，完全能成为你项目里的主力样式解决方案。

后续我准备在小程序和中后台项目里也都用上 UnoCSS，配合 preset 和自定义规则，写起来就像搭乐高一样随心所欲还挺好玩 🤓。