CSS可维护性关键在于克制选择器长度、限制层级不超过2层、慎用高特异性伪类与属性选择器、优先使用子选择器和BEM命名、善用CSS自定义属性替代重复声明。
选择器越长，维护成本越高
绝大多数人写 CSS 时，下意识堆叠层级来“确保命中”，结果是 .header .nav .menu .item a:hover 这类链式选择器满天飞。它确实能生效，但代价是：只要 DOM 结构微调（比如 .nav 换成 .navigation），整条链就断；更麻烦的是，它会无意中提高特异性（specificity），导致后续想用简单选择器覆盖反而要加 !important 或硬凑更长链。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用语义化类名，比如
.nav-link而非.header .nav ul li a - 避免依赖父子层级超过 2 层，即
.parent .child可接受，.parent .child .grandchild .great-grandchild就该拆 - 用 BEM 命名（如
.card__title、.card--featured）天然限制层级，也明确表达归属关系
伪类和属性选择器容易误用特异性
:hover、:focus-within、[data-status="active"] 这些本身不增加太多权重，但一旦和长链组合，比如 div#main section.article ul li a[href^="/blog"]:hover，特异性就飙升到难以预测的程度——你改一个地方，可能得翻三页 CSS 才找得到冲突源。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把状态类（
.is-active、.has-error）写在 HTML 上，用 JS 切换，而不是靠:not(:disabled)这类复杂逻辑 - 属性选择器尽量限定范围，
[type="submit"]比input[type="submit"]权重低，但更安全；而button[type="submit"]更精准，推荐 - 慎用
:nth-child()，它依赖 DOM 顺序，结构一变就失效；改用:nth-of-type()或直接加类名控制
后代选择器（空格）和子选择器（>）混用导致意外覆盖
.list li 匹配所有后代 li，.list > li 只匹配直接子元素。看起来区别小，但实际项目里，一个组件嵌套两层后，.list li 就可能把子组件的 li 也样式化了，造成“样式泄露”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 默认用子选择器
>，除非你明确需要穿透多层（比如统一设置所有文本链接颜色） - 组件级样式尽量封闭，用
.card > .card__body > p而非.card p，避免影响嵌套的第三方内容 - 检查 DevTools 的“Computed”面板，看某条样式是否被更宽泛的后代选择器意外命中——这是最常被忽略的调试入口
用 CSS 自定义属性替代重复选择器链
当多个选择器共享同一组声明（比如不同组件里的标题都用同一种字体栈），别复制粘贴 .header h1, .article h1, .sidebar h1 { ... }，这会让修改变成体力活，还容易漏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提取共用值为自定义属性，比如
:root { --heading-font: system-ui, -apple-system, sans-serif; }，然后各处用font-family: var(--heading-font); - 组件内局部变量更灵活：
.card { --card-padding: 1rem; padding: var(--card-padding); }，便于单独调整 - 避免在选择器链里反复写
color: #333; font-weight: 600;这类“装饰性声明”，它们比结构更易变，更适合抽离
真正难的不是写出能工作的选择器，而是预判它半年后在哪一行 HTML 里失效、被谁覆盖、改起来要动几个文件。可维护性藏在命名克制、层级节制、特异性透明这些细节里，不在技巧多炫。
