⚡CSS 原子化：30 行代码让样式复用率飙升 300%

回答“是什么、为什么、怎么用、坑在哪”，附可运行示例。

---

1 什么是 CSS 原子化？

CSS 原子化 = 把样式拆成最小不可再分的“原子类”，每个类只含 1 个属性 + 1 个值。
示例：

.p-2     { padding: 0.5rem; }
.text-red { color: #ef4444; }

组合使用：

<div class="p-2 text-red">内容</div>

---

2 优劣势对比（一句话看懂）

维度	优点	缺点
开发	复用高、无命名冲突	类名长、学习曲线
性能	文件体积小、加载快	需 PurgeCSS 清理未用
维护	改一处原子即可	HTML 行数膨胀

---

3 落地方案（3 种）

3.1 Tailwind CSS（JIT 方案）

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
}

/* 只保留用到的原子类 */
@tailwind base;
@tailwind components;
@tailwind utilities;

3.2 UnoCSS（按需生成）

npm install -D unocss

// vite.config.js
import UnoCSS from 'unocss/vite';
export default { plugins: [UnoCSS()] };

<div class="bg-blue-500 hover:bg-blue-700">按钮</div>

3.3 手写原子库（最小示例）

/* src/atoms.css */
.flex { display: flex; }
.items-center { align-items: center; }
.bg-gray-100 { background-color: #f3f4f6; }

<div class="flex items-center bg-gray-100">内容</div>

---

4 踩坑 & 解决方案

坑	场景	解决
类名爆炸	HTML 过长	使用 @apply 组合或组件化
缓存失效	频繁改原子	开启 Tailwind JIT
设计规范	颜色/间距不统一	使用 theme.extend 限制

---

5 一句话总结

CSS 原子化 = 单属性类 + 组合 → 复用高、体积小、维护简，但需 PurgeCSS + 命名规范 兜底。