CSS后期维护成本高的根本原因是样式作用域不明确、复用逻辑隐含于命名、修改易引发意外覆盖；应通过PostCSS+stylelint拦截高危写法、CSS Modules/vanilla-extract实现作用域隔离、@layer声明层级优先级来系统性治理。
为什么 CSS 后期维护成本高，不是写得少，而是改得怕
根本原因不是选择器太长或文件太多，而是样式作用域不明确、复用逻辑隐含在命名里、修改一处触发多处意外覆盖。比如改一个 .btn 的 padding，结果所有带 btn 的组件（包括弹窗关闭按钮、表格操作项）都变了；又或者团队新人加了个 !important 临时修复，半年后没人敢动那个模块。
用 PostCSS + stylelint 在保存时自动拦截危险写法
别等 Code Review 才发现问题，把规范检查嵌入开发流程。重点拦截三类高危行为：
-
!important出现在非工具类规则中（如.text-center !important） - 全局标签选择器滥用（
div { margin: 0; }） - 深度选择器超过 3 层（
.card .header .title span）——这类规则极难定位和解耦
在 stylelint.config.js 中启用：
module.exports = {
rules: {
'declaration-no-important': true,
'selector-max-universal': 0,
'selector-max-compound-selectors': 3,
}
};配合 VS Code 的 stylelint 插件，保存即报错，比口头约定管用十倍。
立即学习“前端免费学习笔记（深入）”；
用 CSS Modules 或 vanilla-extract 替代全局 class 命名博弈
“BEM 命名能解决作用域问题”是个常见误解——它只缓解，不根治。真正有效的是让 class 名字本身失去全局意义。两种轻量方案：
- 已有项目用
CSS Modules：把Button.module.css中的.primary编译成Button_primary__xyz123，天然隔离 - 新项目或需要类型安全的场景，选
vanilla-extract：样式写在.ts文件里，支持export const primary = style({ ... })，编译后无字符串 class，TypeScript 能校验引用是否有效
两者都不需要重写现有样式，只需调整构建配置（Webpack/Vite 插件一行即可启用）。
用 @layer 显式声明样式优先级层级
CSS 优先级混乱常源于“谁后写谁赢”的隐式依赖。CSS @layer 让层级关系可读、可维护：
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
button { border: 1px solid #ccc; }
}
@layer components {
.modal-button { background: red; }
}关键点：
- 层顺序决定权重，
@layer components永远高于@layer base，不用靠选择器堆砌 - 同一层内仍按原有规则（特异性、顺序）计算，但跨层冲突被明确约束
-
浏览器支持已覆盖 Chrome 102+、Firefox 102+、Safari 17.4+，旧版本可配合
postcss-layergrid回退
真正难的不是引入工具，而是让团队接受“样式也要像函数一样有签名、有作用域、有版本边界”。一旦默认所有 class 都是潜在污染源，维护成本就从被动救火转为主动设防。
