CSS 难维护主因是缺乏约束而非语法复杂；需通过命名规范、嵌套限制、自定义属性统一结构、压缩配置优化及工具辅助来提升可维护性。
为什么 CSS 文件越写越难维护
不是语法复杂，而是缺乏约束：没人阻止你把 .header-2 写在 footer.css 里，也没人拦着你在同一个选择器里混用布局、主题、状态三类样式。结果就是改个按钮颜色要 grep 十分钟，加个响应式断点得先理清嵌套层级。
真正拖慢开发的，从来不是写 CSS 的速度，而是定位「哪段样式正在生效」的时间。
PostCSS + postcss-nested 是最轻量的结构化起点
不需要切换预处理器，不强制你学新语法，只解决一个痛点：避免无休止的重复父选择器。
- 写
&就能继承父级作用域，.card { &__title { font-size: 1.2em; } }编译后是.card__title - 嵌套层级建议不超过 3 层，超过就该拆成独立组件类，比如
.card-header-actions比.card .header .actions button更可控 - 注意
postcss-nested不支持@media内嵌到选择器内部（那是postcss-preset-env的事），别误以为缩进就能自动提升媒体查询作用域
.button {
padding: 0.5em 1em;
&--primary {
background: #007bff;
}
&:hover {
opacity: 0.9;
}
}
用 cssnano 压缩前先做“可读性保留”配置
默认开启的 reduceTransforms 会把 transform: translateX(10px) 改成 transform: 10px，看着省字节，但调试时根本看不出这是位移还是缩放。
立即学习“前端免费学习笔记（深入）”；
- 关掉危险压缩项：
{ reduceTransforms: false, mergeLonghand: false, normalizeWhitespace: false } - 保留自定义属性名：确保
cssnano不重命名--theme-color这类 CSS 变量，否则 JS 里getComputedStyle(el).getPropertyValue('--theme-color')会失效 - 压缩只应在构建阶段启用，开发时用
postcss-reporter输出未使用的选择器列表，比肉眼扫更快发现冗余
不要跳过 CSS 自定义属性的命名约束
--color-primary 看起来规范，但一旦项目里同时出现 --color-primary-dark、--primary-color-dark、--dark-primary-color，主题切换逻辑就会失控。
- 统一用
[domain]-[type]-[name]结构，例如：--surface-bg-default、--action-text-hover - 禁止在 JS 中硬编码变量值，一律通过
getComputedStyle(document.documentElement).getPropertyValue('--surface-bg-default')读取 - VS Code 装
CSS Peek插件，悬停就能跳转到变量定义处——前提是命名不随意，否则跳过去是一堆:root { --c1: #000; --c2: #fff; }
结构不是靠工具自动建立的，是靠每次写 class 名前多想半秒：它属于哪个语义层？会不会被其他模块意外覆盖？工具只是让这个思考过程不那么容易被跳过。
