如何编写可维护性高的CSS选择器策略

选择器越长维护越难，因其强耦合DOM结构、高特异性导致覆盖困难；BEM通过扁平化类名解耦样式与结构，禁用后代选择器、限定属性选择器范围、用状态类替代复杂伪类，确保组件样式封闭可定位。

为什么选择器越长，改起来越疼

不是所有能生效的选择器都该被写进代码。.header .nav .menu .item a:hover 看似精准，但只要 .nav 改成 .navigation，整条链就失效；更麻烦的是，它把特异性拉到 0,0,4,1（四个类名+一个类型），后续想用 .nav-link--active 覆盖，就得加 !important 或硬凑更长链——这不是维护，是缝合。

用 BEM 把层级“拍平”到类名里

BEM 不是语法糖，是解耦策略。它让样式不再依赖 DOM 结构，只认类名本身。

• 错： .card .card__header .card__title → 三个类名绑定三层结构
• 对： .card__title → 单一类名，直接作用于元素，DOM 换了也不影响
• 状态用 modifier：.card--featured、.input--error，不靠父容器类控制
• 避免类型选择器参与组合：h2.card__title 比 .card__title 多一层隐式耦合，删掉

子选择器 > 和后代选择器空格，用错就漏样式

.list li 匹配所有后代 li，包括嵌套组件里的；.list > li 只匹配直接子元素。看起来只差一个符号，实际影响范围天壤之别。

• 默认优先用 >，除非你明确需要穿透多层（比如统一设置全站 a 链接颜色）
• 组件级样式必须封闭：.card > .card__body > p，而不是 .card p，否则第三方组件的 p 会被意外染色
• DevTools 的 “Computed” 面板里，如果某条样式被意外命中，大概率是某个宽泛的后代选择器在作祟

属性选择器和伪类，别往长链里塞

[type="submit"] 本身没问题，但一旦混进 div#main section.article ul li a[href^="/blog"]:hover 这种链，特异性直接爆表，调试时根本找不到谁在覆盖你。

立即学习“前端免费学习笔记（深入）”；

• 属性选择器尽量限定范围：button[type="submit"] 比 input[type="submit"] 更准，也比 [type="submit"] 权重低、更安全
• 状态类交给 JS 切换：.is-active、.has-error 写在 HTML 上，别用 :not(:disabled) 这类复杂逻辑拼选择器
• :nth-child() 依赖 DOM 顺序，结构一动就废；改用 :nth-of-type() 或直接加类名控制

真正难的不是写出能跑的 CSS，是当产品要加个“深色模式下卡片标题变粗”时，你能在 30 秒内定位到唯一需要改的地方，而不是 grep 全项目找所有含 card 和 title 的选择器。