BEM修饰符必须与基础类共存于同一元素才生效，单独使用如.button--primary无效；其本质是语义约束而非权重提升，需确保HTML同时写.button.button--primary且CSS用.button.button--primary定义。
为什么 .button--primary 写了却没生效
这不是 BEM 失效，是修饰符语义断裂：.button--primary 必须和 .button 同时出现在一个元素上，否则浏览器只把它当普通类名，权重仍是 0,1,0，极易被 .modal .button（0,1,1）或 #header .button（1,1,0）覆盖。
常见错误包括：
- HTML 漏写基础类：
<button class="button--primary">❌，应为<button class="button button--primary">✔️ - 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 选择器。
比如你写了 .modal__overlay { z-index: 1000 !important; }，但页面上还是被盖住，DevTools 里看到被划掉，点开发现是 .theme-dark * { z-index: 0 !important; } 在作祟——这不是 BEM 失效，是你没拦住全局通配规则。
排查建议：
- 用 DevTools 的“Computed”面板点开被覆盖属性，右键 → “Reveal in Sources” 直接定位冲突源文件
- 禁用
*、body、div开头的全局选择器，尤其第三方主题包里的.theme-base * { } - 所有 Modifier 必须和 Block 共存于同一元素，单独使用
.button--primary是无效的语义表达
BEM 类名本身不提升优先级，那它到底解决什么
BEM 不是靠堆类名来赢权重比赛，而是让每个样式归属清晰、可预期。所谓“.card__title--large 没生效”，90% 是因为 HTML 里没同时写 class="card__title card__title--large"，或者被 body .card .title 这种泛化选择器暴力覆盖了。
真正关键的是：所有选择器必须以单个类名为起点，禁止嵌套生成，比如 .search-form .search-form__submit ❌，必须写成 .search-form__submit ✔️；禁止用标签名强化，如 button.search-form__submit ❌ —— 框架可能用 span 替换按钮，样式立刻断裂。
容易被忽略的一点是：多个 Modifier 共存时，如果都改同一个 CSS 属性（比如 .button--primary 和 .button--large 都设 background），后声明的那个必然赢，哪怕它们语义上完全正交。正确做法是让每个 Modifier 只管自己那块地。
