bem类名仍会被覆盖，因其仅编码归属关系而不提供作用域隔离；需通过wrapper限定、禁用通用规则、严格命名与工具校验来保障隔离效果。
直接写 .button 或 .header 这类泛化类名，BEM 组件样式一定会被覆盖——不是你漏写了 !important，而是浏览器根本不管“这是谁的按钮”，只认选择器是否匹配、权重是否更高、加载是否更晚。
为什么 BEM 类名仍会被外部 CSS 覆盖
BEM 不是作用域开关，它只是把归属关系“编码进类名”，但不阻止别人写同名类或更高权重规则。常见破防场景：
- 第三方 UI 库（如 Ant Design）的
.ant-btn规则里带!important，而你的search-form__button--primary没加，直接失效 - 老代码里残留的
.button:hover通用规则，匹配了所有含button字符串的类名（包括search-form__button） - 团队成员在 SCSS 中嵌套出
.search-form .search-form__button，权重翻倍，覆盖了独立声明的.search-form__button - 服务端渲染 HTML 时动态注入了
class="button"，和你写的search-form__button同时存在，CSS 权重相同，靠加载顺序决定谁赢
用 wrapper block 限定第三方组件的影响边界
别试图给 AntButton 加 search-form__button 类，也别写 .search-form .ant-btn —— 前者破坏其内部状态类（如 .ant-btn-disabled），后者随库升级失效。
标准解法只有一条路径：
- 在外层 DOM 加 wrapper 类：
<div class="search-form"><antbutton classname="search-form__submit"></antbutton></div> - CSS 中只用该 wrapper 限定作用域：
.search-form__submit { padding: 0 16px; }，不碰.ant-btn本身 - 若需调整内部样式（如输入框内边距），用前缀匹配：
.search-form [class^="ant-input"] { padding: 4px 8px; }，禁用模糊匹配[class*="ant-"]
禁止无上下文的后代选择器和通用规则
BEM 的隔离效果不取决于你写了多少 __ 和 --，而取决于是否所有相关样式都**只通过这个唯一类名注入**。只要某处还写着 .search-form .input，沙箱就已经漏了。
- 禁用所有不带 block 前缀的通用规则：
.button、.active、.hidden必须改为ui-button、search-form__input--disabled、tooltip--hidden - SCSS 中只允许
&__和&--嵌套，禁用空格嵌套：.search-form { &__input { } &--loading { } }，不要写.search-form { .input { } } - 用
stylelint-selector-bem-pattern插件拦截破规写法，规则设为{ "componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem" }，CI 中强制校验
修饰符组合必须显式声明，不能靠父级推导
button--primary 单独写无效，必须和基础类 button 共存；button--primary--large 是错的，应写成 button--primary button--large。否则运行时无法条件注入、无法批量控制、调试时 DevTools 里看不到完整状态链。
- JS 动态添加类时，必须走 BEM 命名：
el.classList.add('search-form__input--disabled')，禁用'disabled'这类裸名 - 状态类必须语义化：
search-form__input--invalid比search-form__input--error更准确（前者是校验结果，后者是交互反馈） - 避免在类名里塞逻辑词：
card--is-loaded比card--loaded更清晰，后者易和card--visible混淆
最容易被忽略的一点：BEM 的隔离效果，永远依赖于「所有人一致遵守」。哪怕只有一个组件用了 .button，整个项目的 BEM 隔离就形同虚设——因为 CSS 没有运行时检查，只有人肉约定和工具拦截能守住这条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
