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

小高0072025-09-02 10:22

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

1 什么是 CSS 原子化？

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

示例：

css 复制代码

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

组合使用：

html 复制代码

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

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;

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>

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>

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