根本原因是未预先明确样式控制关系。需用CSS自定义属性定义设计约束、@layer分层锁定样式顺序、组件边界声明防止样式污染，并通过design token统一多端数值与语义，及时删除无用代码。
为什么 CSS 样式总要推翻重来
根本原因不是手写慢，而是没在写第一行 color 之前想清楚「谁控制谁」。比如一个按钮，在 .header 里和在 .modal 里该不该共用同一套尺寸逻辑？如果直接写 .btn { padding: 12px 24px; }，后面遇到「弹窗里的按钮要更紧凑」时，要么加 !important，要么复制粘贴改一遍，最终变成一堆无法归类的补丁。
CSS 工具不是帮你写得快，是帮你拒绝随意覆盖
真正起作用的不是 PostCSS 插件或原子类生成器，而是三个轻量但必须落地的动作：
- 用
css-custom-properties提前定义设计约束，比如--space-xs: 4px;、--radius-md: 8px;，而不是在每个选择器里重复写数字 - 用
@layer显式声明层级顺序（支持浏览器已超 95%），把重置、基础样式、组件、主题分层锁定：@layer reset, base, components, theme;
后续所有@layer components { .btn { ... } }都不会意外被 base 层覆盖 - 对每个新组件，先写一条「边界声明」：比如
.card { container-type: inline-size; }或.list { contain: content; }，明确告诉浏览器「这部分样式不许外溢，也不许被外层轻易穿透」
当团队开始共享同一份 design token JSON
别让设计师给的 Sketch 文件成为唯一真相源。把字号、断点、阴影值导出为 tokens.json，再用工具（如 style-dictionary）同步生成 CSS 变量、SCSS map、JS 常量。关键不是生成多全，而是让 font-size: var(--text-lg) 和 fontSize: tokens.text.lg 指向同一个数值——否则前端调样式时查 Figma，后端渲染时查 JS 对象，迟早对不上。
常见错误是只导出变量名，不导出语义约束。比如 "text-lg": "18px" 不如 "text-lg": {"value": "18px", "description": "主内容段落，默认行高 1.5"}。没有 description，半年后没人记得 --text-lg 能不能用在按钮里。
立即学习“前端免费学习笔记（深入）”；
推翻重来的临界点往往在第 3 次修改
当你第 3 次为同一个组件加 [data-variant="compact"]、[data-theme="dark"]、.sidebar & 这类修饰时，说明结构已经失焦。这时停一下，把当前所有相关规则复制进新文件，运行 postcss --use postcss-sorting 整理顺序，再手动删掉所有 !important 和嵌套过深的选择器（超过 3 层就标红）。剩下的，就是可维护的最小闭环。
最常被忽略的是「删除权」：没人规定旧 CSS 必须留着。上线后确认无引用的 .legacy-header__title--v1，就该从源码里物理移除——保留它们，等于给下一次推翻埋好引信。
