BEM隔离仅对自身类名生效，一旦使用后代选择器、全局规则或!important即失效；.search-form__input被覆盖主因是外部.css中存在.search-form input、.ant-input等高权重规则或!important锁死样式。
层叠污染不是 BEM 写得不够长，而是有人在 BEM 类名之外偷偷加了后代选择器、全局规则或 !important——BEM 的隔离能力只对它自己定义的类名生效，一旦跳出这个边界，沙箱就漏了。
为什么 .search-form__input 还会被其他样式覆盖
BEM 类名本身不改变 CSS 层叠逻辑。如果某处写了 .search-form input 或 input[type="text"]，浏览器照样匹配并应用；更隐蔽的是第三方库（如 Ant Design）的 .ant-input 规则权重更高，或者项目里残留的全局 reset.css 用 !important 锁死了 font-size。
-
.search-form__input和.search-form input是两条完全不同的路径：前者靠类名归属，后者靠 DOM 层级，后者会跨块生效 - 多个 BEM 块共用同一份基础样式（如
common.css中定义了.button），等于把隔离墙拆掉重砌 - 构建工具未启用 CSS Modules 或 scoped，导致
.card__title在全局 CSS 文件中编译后仍是裸名，所有页面都受其影响
如何堵住层叠泄漏的常见出口
层叠污染往往来自“看起来合理”的写法，比如 SCSS 嵌套、JS 动态 class、第三方组件注入。关键不是禁用它们，而是限定作用范围。
- SCSS 中禁止空格嵌套：
.search-form { &__input { } }✅；.search-form { .input { } }❌（生成.search-form .input） - JS 操作 class 时，只增删 BEM 类名：
el.classList.add('tooltip--visible')✅；el.classList.add('active')❌（裸名无法被 BEM 工具链识别和约束） - 对接 Ant Design 等库时，不用
.ant-btn，改用上下文包裹：[data-scope="checkout-form"] .ant-btn或.checkout-form__submit .ant-btn - 服务端渲染的 HTML 若含不可控 class（如富文本中的
hljs-string），在外层容器加 BEM 块名，并用属性前缀兜底：.article-content [class^="hljs-"]
stylelint-selector-bem-pattern 怎么真正卡住层叠漏洞
这个插件不只检查类名格式，还能识别出破坏 BEM 封装性的选择器结构。它默认拒绝 .block .element、div.block__elem、.block:hover 这类写法，因为它们绕过了 BEM 的命名即作用域原则。
立即学习“前端免费学习笔记（深入）”；
- 配置
{"styleType": "bem"}后，.menu-item__icon会被报错——因为menu-item应是 Block，不能当元素名使用 - CI 流程中运行
npx stylelint "**/*.{css,scss}"，失败即阻断合并，比 Code Review 更可靠 - 它不拦截
:global(.ql-editor)，但能抓到:global(.ql-editor p)中的p（非 BEM 结构），提醒你收缩范围
最容易被忽略的是：BEM 的层叠安全不是靠“写了多少 __”，而是靠“有没有一处没守规矩”。哪怕整个项目 99% 都合规，只要存在一个 .header .logo，这个 header 块的样式就随时可能被其他模块的 .logo 规则穿透。工具链必须覆盖所有 CSS 入口，包括第三方样式 patch、动态插入的 style 标签、甚至内联 style 属性里的选择器。
