BEM通过唯一Block前缀强制隔离语义边界，使选择器权重和来源可预测，避免层叠冲突；但无法解决样式穿透、!important覆盖及未加前缀的伪类劫持等问题。
CSS层叠性本身不会“破坏”样式，它只是按规则执行——问题出在开发者没控制好作用域边界。 你写的 .btn 和第三方库的 .btn 碰上了，浏览器照规则选权重高、位置靠后、带 !important 的那条，结果你的被盖掉。这不是层叠性错了，是你和别人共用了同一把“钥匙”去开同一扇门。
为什么BEM能切断层叠污染链
BEM（Block-Element-Modifier）不是魔法，它靠命名强制隔离语义边界：同一功能模块的所有类名都带上唯一 Block 前缀，比如 search-form__input、search-form--disabled。这直接让选择器权重和来源变得可预测。
- 避免和全局
.input或框架.form-control冲突——名字不同，根本进不了同一场层叠竞争 - 不依赖加载顺序：哪怕你 CSS 文件写在最前面，
header__logo也不会被后面出现的.logo覆盖 - 删除组件时，删掉对应 BEM 前缀的所有类即可，不会误伤其他模块的同名类
BEM不是万能解药，这些地方它压不住
当样式穿透发生时，BEM命名再规范也白搭：
- 子组件使用了
:global或/deep/（Vue）强行打破作用域 - 父组件设置了
!important，子组件用 BEM 也扛不住——search-form__button !important依然输给.btn-primary !important - 伪类或属性选择器没加前缀，比如写了
.search-form input:focus，但没写成.search-form__input:focus，焦点样式就可能被外部规则劫持
比BEM更轻量的替代方案：CSS层叠层（@layer）
如果你无法重构所有类名，又想摆脱 !important 泥潭，@layer 是更现代的选择。它不改命名，只管排序：
立即学习“前端免费学习笔记（深入）”；
- 先声明层级顺序：
@layer reset, base, components, overrides; - 把第三方样式（如 Tailwind）放进
@layer utilities;，自己的覆盖规则放进@layer overrides; - 注意：未加
@layer的普通规则仍高于所有已命名层——所以必须把所有关键样式都显式归层，否则反而更乱
真正难处理的从来不是技术本身，而是团队里有人写 .button、有人写 btn、还有人直接用 div[role="button"]。命名约定没人守，再好的机制也会漏风。
