不能全局搜索替换.btn或.card类名，应优先识别冻结泛化名（如.btn、.nav、.sidebar）和js硬编码类名，通过语义映射新增bem类、保留旧类作别名，配合@layer分层、状态类前缀隔离及js自动同步实现平滑过渡。
不能靠全局搜索替换 .btn 或 .card 类名来过渡到 BEM——90% 的线上样式崩坏和 JS 逻辑断裂都源于这一步。真正平滑的过渡，是让新代码立刻合规、旧代码明确隔离、关键类名不被删除只加别名。
哪些类名必须先识别并冻结，而不是直接替换
直接删掉或重命名这些类，JS 就会报 document.querySelector('.toggle') 返回 null，表单校验、埋点、动画钩子全失效：
-
.btn、.nav、.sidebar这类泛化名：语义混杂，可能同时表示按钮、链接、标签，且常被 JS 硬编码绑定 - 高频修改文件里反复出现的混杂类：
.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，逐步替换
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，避免继承旧全局重置的副作用
JS 里硬编码的类名怎么兼容过渡期
很多 el.classList.contains('error') 或 el.classList.toggle('active') 直接依赖旧类名，不能一刀切改：
- 对高频使用的状态类（如
error、active、loading），统一加前缀转为is-error、is-active、is-loading，它们和 BEM 主结构解耦，纯描述状态 - 在 JS 初始化时，自动给对应 DOM 添加 BEM 类名：
if (el.classList.contains('error')) el.classList.add('form-item__input--error') - 禁止在 JS 里拼接 BEM 类名：
el.classList.add(block + '__input--' + state)—— 这会让修饰符语义失控，且无法静态分析 - 所有
querySelector调用必须加注释标记，例如：// TODO: migrate to login-form__submit, keep .btn for now
最易被忽略的点是：BEM 不是重命名工具，而是用命名契约显性化组件边界。一旦开始迁移，就要立刻停掉所有新写的泛化类名（如 .red、.left、.clear），哪怕只写一行，也会让后续收口成本翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
