BEM不能改变CSS全局作用域，但能将样式归属硬编码进类名（如search-form__input--disabled），实现脱离DOM结构的精准作用域隔离，前提是禁用后代选择器、裸类名和跨块复用。
它不能“从根本上解决”——CSS 全局作用域是浏览器规范决定的，谁也改不了。BEM 的真实能力是：在不改变浏览器行为、不引入构建时转换、不依赖运行时沙箱的前提下，把「样式归属」这个本该靠人脑维护的契约，硬编码进类名本身。
为什么直接写 .btn 就等于主动打开污染入口
浏览器根本不区分「谁写的 .btn」，只看 DOM 节点有没有这个 class。Ant Design 渲染出 class="ant-btn btn"，你本地的 .btn { padding: 4px; } 就会叠上去；服务端吐出的静态 HTML 里有 btn，一样中招。
- 常见错误现象：
.header被重置样式误命中、.modal把第三方弹窗撑开、自己写的.button改了边框，Element Plus 输入框也跟着变 - 靠提高权重（比如
div.header button.btn）只是压制，对挂到body下的动态弹窗完全失效 -
!important是反模式：它会截断 BEM 的 modifier 覆盖链，比如button--primary本该覆盖基础色，却被外部!important挡住
search-form__input 不是加长名字，是声明作用域边界
这个类名本身就在回答三个问题：它属于谁（search-form）、它是什么角色（__input）、它现在什么状态（可加 --disabled）。删掉父级 search-form 类，整个样式就静默失效——这才是隔离。
- 禁止写
.search-form .input这类后代选择器：那等于凿穿沙箱墙，DOM 结构一变就崩，弹窗挂到body时直接失效 -
__只用于块的直属子元素，.dialog__header__title是非法的（应为.dialog__title） -
--只修饰 block 或 element，不能修饰另一个--，也不能单独存在（.input--disabled✅，.input__label--disabled❌）
BEM 约定真正起效的前提，是你敢让类名“脱离上下文就失效”
它不靠工具，靠人每次写 class 前真问一句：“这个样式脱离当前 block 还能成立吗？”
立即学习“前端免费学习笔记（深入）”；
- 错写成
.icon--loading：失去 block 锚点，变成全局干扰源 - 漏传
user-card到父容器：user-card__avatar样式静默失效，而不是误中其他元素 - 第三方组件渲染出
class="ant-btn btn"，你改.btn就中招；但改.user-card__avatar完全不影响它 - 两个开发者都写了
.user-card__avatar，后加载的规则仍会覆盖前一个——BEM 不生成唯一类名，它只是约定
最容易被忽略的地方在于：BEM 的隔离效果，从不取决于你用了多少双下划线，而取决于你是否允许任何一处出现裸名、后代选择器或跨块复用——只要有一处破防，整个沙箱就形同虚设。
