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

选择器越长，改起来越疼——这几乎是前端界的共识。它和DOM结构强耦合，特异性高到爆表，后续覆盖时要么加 !important，要么硬凑更长的链，根本不是在维护，是在缝补。BEM的思路是把层级“拍平”到类名里：禁用后代选择器，限定属性选择器范围，用状态类代替复杂伪类，让每个组件的样式封闭、可定位。

先别急着写选择器，想清楚一个问题：这条样式到底该由谁来管？不是所有能生效的选择器都值得写进代码里。比如 .header .na v .menu .item a:hover，看着很精准，但只要 .na v 改成 .na vigation，整条链就全废了。更麻烦的是，它的特异性已经拉到 0,0,4,1（四个类名加一个类型），后续你想用 .na v-link--active 覆盖它？不是加 !important 就是继续加长链，越缝越乱。

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

其实道理很简单：长度意味着依赖层级。你写的每多一层，就是在和DOM结构签订一份“绑定协议”。一旦结构变，样式就崩。更隐蔽的问题是特异性——长链叠加的权重会让后续任何改动的成本指数级上升。所以，不是不能写长选择器，而是你得问自己：这个“精准”是必要的，还是偷懒的？

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

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

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

这才是真正的“封闭”——你想改卡片标题的样式，只需要找到 .card__title 这一个选择器，而不是在全项目里 grep 所有包含 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 的选择器。