最常见原因是html未同步更新class名，如css写.header__logo但dom仍为class="logo"，bem仅匹配类名；其次旧选择器删除后新bem类未补全:hover等伪类规则。
为什么BEM重构后样式突然失效
最常见原因是 HTML 中没同步更新 class 名，比如 CSS 里写了 .header__logo，但 DOM 里还是 class="logo"。BEM 不依赖层级关系，只认类名是否匹配——类名不存在，规则就完全不生效。另一个隐蔽问题是旧选择器（如 .header .nav a）被删掉或注释了，但新 BEM 类没补上伪类状态（:hover、:focus），导致交互态消失。
- 用开发者工具 Elements 面板逐个点击目标元素，确认其
class属性值和当前生效的样式来源 - 检查所有旧选择器是否已完整迁移：不只是主体类，还包括
&:hover、&::before等衍生规则 - 禁用浏览器缓存后硬刷（Ctrl+Shift+R），避免旧 CSS 文件被缓存覆盖新规则
如何验证 Block 和 Element 是否定义正确
Block 必须是可独立复用的视觉/逻辑单元，不能是布局容器。比如 .sidebar 是布局区，不应升级为 Block；而它里面的 .widget 才是 Block，因为能插到首页、详情页、弹窗里都成立。Element 名必须表意，不是定位——.widget__title 合理，.widget__sidebar-title 违规。
- 在 HTML 中搜索
class="widget"，确认该节点是否真能脱离.sidebar存在且语义完整 - Element 类名必须带完整 Block 前缀：
widget__title✅，__title❌（浏览器不识别） - 禁止三层嵌套命名：
card__body__text是错的，应合并为card__text或拆出新 Block
Modifier 共存时样式被覆盖怎么办
多个 Modifier 如 .button--primary 和 .button--disabled 可以共存，但前提是它们修改的 CSS 属性维度不重叠。如果两者都设了 background 或 padding，后声明的会覆盖前者——这不是 BEM 的问题，而是 CSS 自身层叠逻辑。
- 所有 Modifier 规则必须用单类名选择器：
.button--disabled { }✅，.button .button--disabled { }❌（权重低且破坏 BEM） - 避免同一属性重复定义：让
--primary控制颜色，--large控制尺寸，--disabled控制交互态 - 叠加态需显式覆盖：
.button--disabled.button--loading { opacity: 0.5; }，不能依赖默认值推导 - 检查构建工具（如 cssnano、PurgeCSS）是否误删了动态添加的 Modifier，safelist 要加正则：
/button--(disabled|loading)/
为什么 DevTools 里能看到类名却没样式
可能原因有三个：CSS 文件编码含 BOM（尤其 Firefox 对 UTF-8 with BOM 解析极不稳定）、某条规则语法错误导致后续所有样式静默失效、或类名被构建工具误处理（如 CSS Modules 下写了 :global(.button__icon) 但实际需要局部作用域）。
- 用 VS Code 打开 CSS 文件 → 编码菜单 → “转为 UTF-8 无 BOM” → 保存
- 在 DevTools Styles 面板中从上往下逐条取消勾选规则，一旦页面恢复，立即定位那行——常见是
@keyframes漏闭合、grid-template-areas引号不配对 - 检查是否混用了作用域方案：React 中同时用了
className="button__icon"和className={styles.button__icon}，二者冲突
.card--featured 能否独立存在、不靠任何上下文就渲染正确，才是检验是否落地成功的标尺。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
