bem不提升css优先级，而是解决样式归属混乱；.button--primary必须与.button共存于同一元素才能生效，单独使用无效；全局泛化选择器或模块class名冲突会导致覆盖失效，需通过css modules或语义化重命名隔离。
直接说结论：BEM 本身不提升 CSS 优先级，它解决的是“谁该覆盖谁”的归属混乱问题；所谓“覆盖无效”，90% 是因为类名语义断裂或选择器写错，而不是权重不够。
为什么 .button--primary 写了却没生效
这不是 BEM 失效，是修饰符没绑定到块上。浏览器不认 .button--primary 独立存在——它必须和 .button 同时出现在一个元素上，或者用 .button.button--primary 这种组合选择器声明。
- 错误写法：
.button--primary { color: blue; }→ 单独这条规则权重低，且语义缺失，容易被.modal .button这类更具体的选择器压垮 - 正确写法：
.button.button--primary { color: blue; }或.button--primary.button { color: blue; }→ 明确依赖块存在，权重也翻倍（两个类选择器） - 更稳妥写法：
.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 合并，若多个页面共用一个 entry，则 class 名仍会碰撞
真正难处理的不是怎么写对 BEM，而是当老代码里混着 .header .title、div > h2、!important 和未声明的 CSS Modules 类时，你得先判断：这是该修样式，还是该修构建流程，或是该推动团队停用某条祖传 reset.css。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
