浏览器从右向左匹配CSS选择器，先找a:hover再逐级向上验证父元素；BEM通过.block__element切断DOM结构依赖，避免样式失效与权重爆炸。
浏览器匹配方向和人脑理解方向完全相反
你写 .header .nav .menu .item a:hover，浏览器不是从左往右找，而是先抓所有 a:hover，再逐个往上查父级是否是 .item、再查它是不是在 .menu 里……每多一层，就多一次 DOM 树向上遍历。DOM 节点一多（比如商品列表渲染 200 个卡片），Recalculate Style 时间就明显拉高，DevTools Performance 面板里能直接看到卡顿。
改 HTML 就等于废 CSS
这类选择器把样式和 DOM 结构强绑定了。只要删掉中间一层 wrapper（比如把 <nav class="nav"></nav> 改成 <nav class="navigation"></nav>），整条规则就静默失效——DevTools 里甚至不报错，只是“没生效”，新人根本找不到问题在哪。
- 团队协作时没人敢动
.layout .main .content这类父容器，怕崩掉某个页面的标题大小 - 复制一段 HTML 到新页面？得同步检查所有父级类名是否存在，否则样式全丢
- JS 里如果还硬编码了
document.querySelector('.header .nav .menu-item')，样式一改，交互也断
权重爆炸让后续覆盖变成噩梦
.a .b .c .d 的 specificity 是 0,0,4,0，而单类名 .d 只有 0,0,1,0。结果就是：
- JS 动态加
is-hidden类，根本盖不住它，最后只能加!important - 想局部调整颜色？得写
.card .header .title.card--dark这种更重的选择器，恶性循环 - DevTools 的“已计算样式”面板里，真正生效的规则被压在十几条灰色的被覆盖规则底下，人工定位要反复验证路径
BEM 不是加长类名，是切断隐式依赖
写 .card__title 不是为了好看，是让这个样式只认这一个 class，不关心它嵌在哪、父元素叫啥、有没有被 <section></section> 包着。删掉任意父级，它照样生效；复制到新页面，只要 class 名对，样式立刻可用。
立即学习“前端免费学习笔记（深入）”；
- 禁止写
.card .card__title——这是 BEM 最常破功的地方，等于自己又套了一层结构耦合 - 修饰符必须带 block 前缀：
button--loading比is-loading安全，避免语义飘移 - 真需要上下文（比如主题切换），用
.theme-dark .button这类有限嵌套，但前提是它不随 DOM 变动而失效
真正卡住重构的，从来不是“怎么写新样式”，而是旧代码里那些看不见的 DOM 路径假设和 JS 里的硬编码选择器——它们不会报错，但会在你改完 class 名的下一秒，让按钮点击失效、标题变大、响应式布局错乱。
