回答"是什么、为什么、怎么用、坑在哪",附可运行示例。
1 什么是 CSS 原子化?
CSS 原子化 = 把样式拆成最小不可再分的"原子类" ,每个类只含 1 个属性 + 1 个值 。
示例:
css
.p-2 { padding: 0.5rem; }
.text-red { color: #ef4444; }
组合使用:
html
<div class="p-2 text-red">内容</div>
2 优劣势对比(一句话看懂)
维度 | 优点 | 缺点 |
---|---|---|
开发 | 复用高、无命名冲突 | 类名长、学习曲线 |
性能 | 文件体积小、加载快 | 需 PurgeCSS 清理未用 |
维护 | 改一处原子即可 | HTML 行数膨胀 |
3 落地方案(3 种)
3.1 Tailwind CSS(JIT 方案)
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
js
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
plugins: [],
}
css
/* 只保留用到的原子类 */
@tailwind base;
@tailwind components;
@tailwind utilities;
3.2 UnoCSS(按需生成)
bash
npm install -D unocss
js
// vite.config.js
import UnoCSS from 'unocss/vite';
export default { plugins: [UnoCSS()] };
html
<div class="bg-blue-500 hover:bg-blue-700">按钮</div>
3.3 手写原子库(最小示例)
css
/* src/atoms.css */
.flex { display: flex; }
.items-center { align-items: center; }
.bg-gray-100 { background-color: #f3f4f6; }
html
<div class="flex items-center bg-gray-100">内容</div>
4 踩坑 & 解决方案
坑 | 场景 | 解决 |
---|---|---|
类名爆炸 | HTML 过长 | 使用 @apply 组合或组件化 |
缓存失效 | 频繁改原子 | 开启 Tailwind JIT |
设计规范 | 颜色/间距不统一 | 使用 theme.extend 限制 |
5 一句话总结
CSS 原子化 = 单属性类 + 组合 → 复用高、体积小、维护简,但需 PurgeCSS + 命名规范 兜底。