.button--primary没生效不是bem失效，而是修饰符语义断裂：它必须与.button共存于同一元素，否则权重仅为0,1,0，易被更高权重选择器覆盖；且构建顺序错乱或全局通配规则也会导致覆盖失效。
为什么 .button--primary 写了却没生效
这不是 BEM 失效，是修饰符语义断裂：浏览器不认 .button--primary 独立存在——它必须和 .button 同时出现在一个元素上，否则 CSS 规则权重仍是 0,1,0，极易被 .modal .button（权重 0,1,1）或 #header .button（权重 1,1,0）覆盖。
常见错误：
- HTML 漏写基础类：
<button class="button--primary"></button>❌，应为<button class="button button--primary"></button>✔️ - CSS 规则写成
.button--primary { color: blue; }，而非.button.button--primary { color: blue; }—— 后者权重翻倍且语义完整 - 构建时多个 CSS 文件合并顺序错乱，导致
.button定义在.button--primary之后，后者被前者覆盖
为什么两个同权重 BEM 类名会互相覆盖
权重相同（都是 0,1,0）时，谁在最终 CSS 中声明得靠后，谁生效。BEM 不控制加载顺序，只保证权重一致；而构建工具（Webpack/Vite）默认的打包策略、@import 的使用、甚至文件命名顺序，都可能打乱层叠逻辑。
典型现象：
-
.card__title在typography.css里定义，.card__title--large在card.css里定义，但构建后typography.css被插在后面 →--large失效 - 用了
@import但没分析依赖图，@import "base";和@import "theme";实际加载顺序与书写顺序不一致 - 第三方库（如 Ant Design）的 CSS 通过 JS 动态注入，时间点晚于你的 BEM 样式，天然“后声明”
为什么加了 !important 还是覆盖不了
不是优先级不够，而是作用域被穿透：!important 只能赢过同选择器级别的规则，但挡不住来自更高抽象层的暴力通配或 ID 选择器。
真实原因往往藏在这几处：
- 全局重置样式里有
body * { color: #333 !important; }或.theme-dark * { opacity: 0.9 !important; }—— 这类规则无视 BEM 结构，直接穿透所有 block - 父组件用 CSS-in-JS 注入了
style属性，内联样式 +!important优先级高于任何外部 CSS - 你写的
.button--disabled !important被第三方组件内部更细粒度的.ant-btn.ant-btn-disabled span !important覆盖（因为后者多一个类选择器，权重已是 0,2,0）
为什么 BEM 命名正确，但 DevTools 里样式被划掉
划掉 ≠ 权重低，而是“匹配但被同权重后声明规则覆盖”。关键看 DevTools 的 Computed 面板里 “Matched CSS Rules” 列表中哪条带灰色删除线，右键 → “Reveal in Sources” 才能准确定位冲突源。
排查要点：
- 检查是否误用了后代选择器：
.search-form .search-form__submit看似合理，但左侧.search-form触发 DOM 回溯，且权重升为 0,1,1，破坏 BEM 扁平前提 - 确认构建是否启用了 CSS Modules：
css-loader的modules: true会让.button编译成_button_abc123，若你手写了未哈希的类名，就根本匹配不上 - 留意框架自动注入的类名（如 Vue 的
v-enter-active、React 的css-xyz），它们可能和你的 BEM 类名撞车，又没走同一套构建流程
真正容易被忽略的，是 BEM 的有效性极度依赖 HTML、CSS、构建三端严格对齐——缺一不可。类名写对只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
