原子化与 UnoCSS

原子化 CSS：通过大量小而单用途的类（如 flex、p-4、text-center）组合出界面，减少手写重复 CSS。UnoCSS 是按需生成的原子化引擎：扫描源码中的类名，只产出用到的规则，体积极小、冷启动快。

---

UnoCSS 相对其它方案

对比	要点
Tailwind	预设类海量；JIT 后按需生成，构建链更重
UnoCSS	规则即时生成，常与 Vite 深度集成，热更快
Bootstrap	组件导向，整包体积大，风格固定

适用：中大型 SPA、希望 设计令牌 + 工具类 快速迭代；不适用：强视觉定制落地页且排斥工具类噪音。

---

接入要点（Vite）

// vite.config.ts
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [UnoCSS()],
});

按需安装 unocss 与框架插件；配合 PostCSS（如 postcss-pxtorem）做 rem 适配时，注意 UnoCSS 输出与 rem 根字号 的配合。

---

预设与规则

• 常用 presetUno（类 Tailwind/Windi 语法）、presetAttributify（属性化写法：bg="blue-500"）。
• uno.config.ts 里用 rules 扩展自定义原子类，用 theme 扩展颜色、间距、断点。
• 主题切换：颜色等映射到 CSS 变量（如 primary: 'var(--color-primary)'），根节点切换 data-theme 或类名即可换肤。

---

书写习惯（示例）

布局与间距：flex、justify-between、items-center、gap-4、p-4、w-full。
响应式前缀：md:flex-row、sm:text-sm。
任意值：w-[calc(100%-20px)]（按文档启用）。

更细的类名表建议在项目中 查官方预设文档，本文保持「选型与结构」级别。

---

小结

原子化适合团队 统一设计语言 + 快速迭代；成本是学习曲线与 类名冗长。UnoCSS 优先看清 preset + rules + theme 三层配置即可上手大部场景。