层叠是可主动设计的控制机制，能减少30%以上重复声明并避免!important滥用；其优先级由来源、重要性、特异性、顺序四重叠加决定，并非仅看书写先后。
直接说结论：层叠不是要“绕开”的麻烦，而是可主动设计的控制机制；用好它，能少写 30% 以上重复声明，还能避免 !important 滥用带来的维护黑洞。
理解层叠优先级的实际权重顺序
很多人以为“后写的样式一定生效”，其实浏览器判断依据是三重叠加：来源（user agent div .class #id）、声明顺序（同权重时后胜）。内联样式本身不等于最高优先级——它只是特定性高（相当于 1,0,0,0），但带 !important 的 #id 规则仍可能被覆盖。
- 测试时别只靠“改完刷新看效果”，用浏览器开发者工具的 Styles 面板看哪条规则被划掉、为什么被划掉
-
!important在作者样式表里能压过内联样式，但压不过内联自带的!important（此时只能用animation或 JS 强制覆盖） - 特定性计算别心算：用在线工具如 specificity.keegan.st 输入选择器，直接出数字结果
用继承替代重复声明
CSS 继承不是“偷懒”，而是结构化压缩的关键。文字颜色、字体族、行高这些属性天然支持继承，只要父元素设好，子元素不用每个都写。
- 在
:root或body上设置基础字体和颜色，比如body { font-family: system-ui, sans-serif; color: #333; } - 避免在每个
p、span、li里重复写font-size或line-height，除非真有差异化需求 - 注意：
border、padding、margin不继承，强行“继承”得靠 CSS 变量 +var(--gap)，而不是指望父级传下来
按层叠意图组织 CSS 文件顺序
层叠依赖顺序，所以文件引入顺序就是逻辑顺序。把 reset/normalize 放最前，基础变量和通用类放中间，组件样式放最后——这不是约定俗成，而是让覆盖关系清晰可控。
- Webpack/Vite 项目中，确保
import 'normalize.css'在所有业务 CSS 之前 - 不要把主题色变量定义在组件文件里，统一收口到
variables.css或:root块中 - 如果用 Tailwind，它的 utility class 是按字母序生成的，
text-red-500会比text-blue-500后加载，但实际生效靠的是特定性一致下的声明顺序——这点容易被忽略
用特定性梯度代替深度嵌套
嵌套越深，特定性越高，越难被后续规则覆盖，最终逼人加 !important。真正可持续的做法，是用 BEM 类名控制特定性增长节奏。
- 写
.card__title而不是.card .title，前者特定性固定为0,2,0，后者是0,1,1且易受父级变动影响 - 避免
div ul li a这种纯元素选择器链，它特定性低（0,0,0,4），但脆弱——换一个 HTML 标签就失效 - 当需要覆盖第三方组件样式时，优先复制它的类名再加修饰符（如
react-datepicker__input--custom），而不是用!important或超长嵌套
层叠真正的复杂点不在规则本身，而在于多人协作时对“谁该负责哪一层样式”的隐含假设。一旦团队没对 reset、base、layout、component 四层职责达成共识，文件顺序和类名设计就会退化成拼凑行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
