原子化 CSS 的核心是用预设的单一职责工具类（如 text-lg、px-4、bg-blue-500）直接在 HTML 的 class 属性中声明样式，按需生成最小 CSS 文件，避免命名混乱与全局污染，提升复用性与可维护性。
直接用工具类写 HTML，不写单独的 CSS 文件——这是原子化 CSS 在 HTML 层最核心的落地方式。它不是“怎么在 HTML 里用 CSS”，而是“怎么让 HTML 自身承载样式意图”。
class 属性里写什么才叫原子化
原子化不是把所有 class 都堆在一起，而是只用语义清晰、职责单一的预设类。比如 text-lg 只管字号，px-4 只管左右内边距，bg-blue-500 只管背景色。
- 避免混合语义：不要写
card-header这类组件名，它违反单一职责 - 拒绝手写组合逻辑：不要靠
mt-2 mb-4模拟一个my-3，除非你确认框架没提供 - 警惕任意值写法：
mt-[17px]虽然支持，但会绕过 tree-shaking，生产环境慎用 - 响应式要带前缀：移动端隐藏 + 桌面显示，写
md:hidden lg:block，而不是两个独立 class
为什么 class 多了但最终 CSS 文件反而更小
关键不在“写了多少 class”，而在构建时是否做了按需提取。Tailwind、UnoCSS 等工具默认扫描 .html、.js、.vue 等源文件中的 class 字符串，只生成实际出现过的规则。
- 没在模板里出现的
ml-96或text-emerald-900，根本不会进最终 CSS - 开发时用的完整工具集（如 Tailwind 的默认配置）可能有上万条规则，但生产包通常压到 10–30KB
- 如果你用的是纯 CSS 手写原子类（比如自己定义
.p-1{padding:.25rem}），那就没有 tree-shaking，体积只会随 class 数量线性增长 - PurgeCSS 已被现代工具内置替代，不用单独配；但若用旧版或自定义构建流程，得确保
content字段正确指向所有模板路径
如何避免 class 堆砌失控
原子化不等于无约束地拼接 class，失控往往源于缺乏设计收敛和团队约定。
立即学习“前端免费学习笔记（深入）”；
- 禁用任意颜色/间距值：在
tailwind.config.js中限制colors和spacing，比如删掉13、15这类非设计系统值 - 用
@layer base统一重置，避免每个组件都写box-border、font-sans - 复杂重复结构可封装为组件，而非 class 组合：比如导航栏反复出现
flex items-center justify-between p-4 shadow-sm，就该抽成<navbar></navbar>，而不是复制粘贴 class - 深色模式要用
dark:bg-gray-800，别写两套 class 再用 JS 切换 classList
真正难的不是写对 class，而是让整个团队在“什么时候该组合、什么时候该封装、哪些值允许扩展”上达成一致——工具链可以强制 lint，但设计系统的边界必须人工对齐。
