必须优先识别三类高危类名：泛化名（如.btn/.nav/.sidebar）、JS硬编码类、失控类（含!important或深层后代选择器），而非从.header等熟悉类名入手，因其在代码中充当“隐式接口”，直接替换将导致样式崩坏、JS断裂。
直接全局搜索替换 .btn 或 .card 类名，90% 会导致样式崩坏、JS 绑定断裂、回滚困难——BEM 不是重命名工具，而是显性化组件边界的协作契约。
怎么识别必须优先处理的高危类名
别从最熟悉的 .header 或 .list 开始。真正该先筛出来的，是三类在代码中实际充当“隐式接口”的类名：
-
.btn、.nav、.sidebar这类泛化名：语义混杂，可能同时表示按钮、链接、标签，还常被document.querySelector('.btn')硬编码绑定 - 高频修改文件里的混杂类：比如
header.css中反复出现的.logo，在登录页和后台页承担不同结构职责 - 带
!important或深层后代选择器的类：如#main .content .item a:hover，说明它已失控，靠权重强压而非归属控制
执行命令：grep -r "document\.querySelector\(['\"].*\.[a-z]\+['\"]\)" src/ --include="*.js"，把结果列成迁移清单——这些类不能删，只能加别名过渡。
如何在不动 HTML 结构的前提下安全套上 BEM 类名
老项目 DOM 嵌套深、语义乱，硬拆结构会牵连事件绑定和表单校验。务实做法是「语义映射」而非「结构重排」：
立即学习“前端免费学习笔记（深入）”；
- 原代码：
<div class="form"><input></div>→ 改为：<div class="login-form"><input class="login-form__input"></div> - CSS 中立刻删掉所有孤立的
.input、.error规则，只保留.login-form__input和.login-form__input--error - 禁止写
.login-form .input这类后代选择器——它默认你永远不重构父容器，而 BEM 的契约是“删掉login-form，子元素仍能渲染” - 若旧 HTML 已有
class="btn btn-red"，先保留btn-red作别名，新代码只用button--primary，逐步替换
SCSS 嵌套怎么写才不破坏 BEM 语义
&__icon 看着省事，但一不小心就写出 &__input &__icon（带空格），编译出来是后代选择器，等于悄悄绕过 BEM 隔离：
- 只允许单层嵌套：
.search-form { &__input {} &--compact {} } - 禁止
&__input { &__icon {} }——这会生成.search-form__input__icon，违反 BEM 元素不可嵌套原则 - 避免
@extend跨 block：哪怕.button--small和.input--small样式相同，也必须各自定义，否则修改一处，两处同时崩 - 变量名同步 BEM 化：
$button-padding-vertical，而不是$padding-sm，避免团队误以为它是全局尺寸标准
BEM CSS 加载后仍被旧样式覆盖，怎么破
新 BEM 类名写好了，但样式还是被旧 CSS 覆盖？问题不在命名，而在层叠逻辑没理清：
-
<link>必须严格位于旧 CSS 之后（哪怕只是逻辑上后加载），否则.button__text权重再低也压不住#header .nav li a:hover - 用
@layer显式分层：@layer legacy { /* 旧规则 */ }+@layer bem { /* 新 BEM 规则 */ }，现代浏览器按层覆盖 - 对旧 DOM 容器加命名空间根类，如
legacy-header，并在其 CSS 开头写.legacy-header { all: unset; }（慎用，仅限强污染场景） - 新 BEM 组件必须显式重置基础样式：
box-sizing: border-box、margin: 0、padding: 0，避免继承旧全局重置的副作用
最容易被忽略的点是：BEM 的价值不在“全量合规”，而在“新增代码可预期、旧代码可隔离”。哪怕只在一个新弹窗组件里严格用 modal__header、modal--fullscreen，也比花三天批量替换所有 .btn 更安全、更可持续。
