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

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


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 + 命名规范 兜底。

相关推荐
前端_逍遥生11 小时前
Vue3 响应式数据最佳实践速查表
前端·vue.js
KenXu11 小时前
EMP微前端实现Vue2、Vue3、React各版本调用方案
前端
甜瓜看代码12 小时前
面试题总结-网络编程
面试
xw512 小时前
一文搞懂Flex弹性布局空间分配规则
前端·css·flexbox
云枫晖12 小时前
手写Promise-静态方法reoslve和reject
前端·javascript
浮幻云月12 小时前
让 Vue 动画如德芙般丝滑!这个 FLIP 动画组件绝了!
前端·javascript
吃饺子不吃馅12 小时前
揭秘 X6 核心概念:Graph、Node、Edge 与 View
前端·javascript·svg
qwy71522925816312 小时前
Vue中的Provide/Inject如何实现动态数据
前端·javascript·vue.js
艾小码12 小时前
告别重复代码!React自定义Hook让逻辑复用如此简单
前端·javascript·react.js
yoyoma12 小时前
react-infinite-scroll-component 使用注意事项
前端