bem要求只用单类名选择器，因浏览器css匹配从右往左，.button--primary作为关键选择器最轻量确定；若写成.button .button--primary则触发dom回溯，性能下降、结构微调即失效，且违背语义与权重控制原则。
为什么BEM要求只用单类名选择器
因为浏览器匹配CSS是从右往左找“关键选择器”，而.button--primary这种单类名就是最轻量、最确定的关键选择器。一旦写成.button .button--primary或nav .button--primary，关键选择器就变成.button--primary（没问题），但左侧的nav或.button会触发DOM回溯——查完元素再往上翻父节点，性能掉、可读性崩、还容易因结构微调直接失效。
常见错误现象：.header__nav-item:hover样式不生效，结果发现HTML里是<li class="header__nav-item">，但CSS里写了.header__nav .header__nav-item——这既违反BEM语义（.header__nav根本不是block容器），又凭空加了10点specificity权重，后续所有扩展都得跟着提权。
- 所有BEM规则必须以单个类名为选择器起点：
.search-form__submit✔️，.search-form .search-form__submit❌ - 禁止用标签名强化，如
button.search-form__submit——框架可能用<a class="search-form__submit"></a>替换，样式立刻断裂 - Element和Modifier必须绑定Block：写
.search-form__input--error，别写.search-form__input.error（后者权重虽高，但破坏状态封装）
多个修饰符共存时为什么样式还是覆盖错了
不是BEM不支持叠加，而是你把不同维度的样式塞进了同一属性。比如.button--primary设background，.button--large也设background，后声明的那个必然赢——哪怕它们语义上完全正交。
正确做法是让每个Modifier只管自己那块地：.button--primary管颜色，.button--large管padding和font-size，.button--disabled管opacity和cursor。这样DOM里同时加class="button button--primary button--large"，各改各的，互不干扰。
- 检查所有Modifier是否重复定义相同CSS属性（尤其是
background、border、color） - 避免用Modifier干布局活，例如
.button--full-width应改为工具类.w-full或独立布局规则 - 声明顺序很重要：基础类
.button放最前，Modifier按常用组合频率排序（如--primary常和--large一起用，就把--primary放--large前面）
第三方CSS（如Ant Design）入侵时怎么守住BEM防线
你没法删掉.ant-btn，但能确保它不污染你的.search-form__submit。关键不是比权重，而是划清作用域边界——让.ant-btn只在它该在的地方生效。
常见错误现象：全局引入antd.css后，你的.card__title字体被.ant-typography覆盖；或者Vue组件里scoped样式对挂到body下的弹窗无效。
- 用Wrapper Block隔离：给第三方组件包一层
<div class="myapp-legacy-form">，然后写<code>.myapp-legacy-form .ant-btn，权重可控，又不破坏原有结构 - 禁用全局元素选择器：删掉所有
button { }、a { }这类规则，它们是第三方样式的最大突破口 - CSS Modules或构建时加前缀更可靠：Webpack配
css-loader?modules&localIdentName=[hash:base64:5]，比手写.myapp-button省心且无遗漏 - 在Console里执行
document.styleSheets，确认目标CSS文件出现在列表中且cssRules.length > 0 - 检查
<link rel="stylesheet">的href是否带缓存参数（如?v=1.2.3），而实际文件没更新 - 服务端渲染（SSR）项目中，确保CSS注入时机早于首次渲染，否则hydration后样式才来，会闪一下
什么时候该怀疑不是BEM的问题，而是CSSOM没加载
改了.button--primary的颜色，页面死活不变——第一反应不该是调换CSS文件顺序或加!important，而是打开DevTools的Network面板，看那个CSS文件是否真的进了CSSOM（Stylesheet树）。90%的情况是文件404、MIME类型错（返回text/plain）、或被JS动态移除了<link>。
尤其注意构建产物路径、public目录映射、以及HTTP/2 Push是否误推了旧版本CSS。
