.button--primary没生效不是bem失效，而是修饰符必须与.block类共存于同一元素（如class="button button--primary"），单独使用无语义且权重低，易被更具体选择器覆盖。
为什么 .button--primary 写了却没生效
这不是 BEM 失效，是修饰符没绑定到块上。浏览器不认 .button--primary 独立存在——它必须和 .button 同时出现在一个元素上，或者用 .button.button--primary 这种组合选择器声明。
- 错误写法：
.button--primary { color: blue; }→ 单独这条规则权重低（0,0,1,0），且语义缺失，容易被.modal .button（0,0,2,1）这类更具体的选择器压垮 - 正确写法：
.button.button--primary { color: blue; }或.button--primary.button { color: blue; }→ 明确依赖块存在，权重也翻倍（两个类选择器） - 更稳妥写法：CSS 里保留
.button--primary { color: blue; }，但 HTML 必须写<button class="button button--primary"></button>，确保类名共存
当 .card__title--large 被全局样式劫持时怎么办
常见现象是 DevTools 里看到 .card__title--large 的样式被划掉，点开发现是 .theme-dark * { color: #666; } 或 body .card .title { font-size: 14px; } 在作祟。BEM 不防这种“暴力通配”。
- 立刻检查 DevTools 的 “Computed” 标签页，点开被覆盖的属性，看 “Matched CSS Rules” 里哪条带灰色删除线，右键 → “Reveal in Sources” 定位冲突文件
- 禁用所有含
*、body、div等泛化选择器的全局规则，尤其是第三方主题包里那种.theme-base * { } - 不要加
!important补救——它会让后续所有修饰符（如.card__title--small）都难以覆盖，破坏 BEM 的状态演进逻辑
多个模块共用同一 class 名（如 header__title）导致覆盖失效
BEM 的隔离靠的是语义边界，不是自动加前缀。如果两个不同模块都定义了 .header__title，而它们又打包进同一个 CSS 文件，后加载的必然覆盖先加载的——这不是命名问题，是构建时域没切开。
- 用
css-loader开启modules: true，让每个模块的.header__title编译成唯一哈希名（如_header__title_3k9x），物理隔离 - 若必须用全局 CSS，收敛为唯一 block 名：把旧的
.header__title改成.site-header__title和.user-profile-header__title，而不是都叫.header__title - 警惕构建工具自动合并 CSS 的行为——Webpack 的
mini-css-extract-plugin默认按entry合并，若未显式控制顺序，层叠结果不可预测
如何验证 BEM 类名是否真正参与层叠
权重相同时，后定义的规则才生效；但 BEM 类名若未在 DOM 中真实共存，或被构建流程剥离/重命名，就根本不会进入 CSSOM 参与计算。
- 打开 DevTools 的 Elements 面板，确认目标元素确实拥有完整的类名组合，例如
class="search-form search-form--compact search-form__input"—— 缺少search-form，search-form__input就只是个孤立类 - 检查 Network 面板，确认对应 CSS 文件返回 200，MIME 类型为
text/css；若用了rel="preload"或media="print"，样式可能延迟甚至不参与渲染 - Vite/Webpack 项目中，别只看源码
import顺序，要查最终生成的 CSS bundle 里，.button--primary是否真出现在.button定义之后
真正容易被忽略的是：BEM 类名写得再规范，只要没进 CSSOM，或没在 DOM 中成对出现，它就等于不存在。优先级计算永远从“是否命中”开始，而不是从“谁权重高”开始。
