必须优先识别并隔离三类高危类名：被JS硬编码调用的泛化名（如.nav）、高频修改文件中语义混杂的类（如.sidebar）、含!important或深层后代选择器的失控类；它们充当隐式接口，需加别名过渡而非直接替换。
不能直接全局搜索替换 .btn 或 .card —— 90% 的样式崩坏和 JS 断裂都源于这一步。BEM 不是重命名工具，而是用命名契约显性化组件边界、切断隐式依赖的协作机制。
哪些类名必须优先识别并隔离
不是所有旧类都值得动。先筛出三类高危项，它们在代码里实际充当“隐式接口”：
-
.btn、.nav、.sidebar这类泛化名：语义混杂，可能同时表示按钮、链接、标签，还常被 JS 用document.querySelector('.btn')硬编码绑定 - 高频修改文件里的混杂类：比如
header.css中反复出现的.logo，实际在登录页和后台页承担不同结构职责 - 带
!important或深层后代选择器的类：如#main .content .item a:hover，说明它已失控，靠权重强压而非归属控制
执行命令：grep -r "document\.querySelector\(['\"].*\.[a-z]\+['\"]\)" src/ --include="*.js"，把结果列成迁移清单——这些类不能删，只能加别名过渡。
HTML 不动结构，怎么安全套上 BEM 类名
老项目 DOM 嵌套深、语义乱，硬拆结构会牵连事件绑定和表单校验。务实做法是「语义映射」而非「结构重排」：
- 原代码：
→ 改为： - 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 覆盖？问题不在命名，而在层叠逻辑没理清：
-
必须严格位于旧 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('btn')改成el.classList.contains('btn') || el.classList.contains('button__base') - 或更稳妥地用属性选择器过渡：
document.querySelector('[class*="btn"]')比querySelector('.btn')更安全（但只是过渡手段） - 埋点上报、服务端模板渲染、第三方 SDK 配置中出现的类名，必须逐个确认；没覆盖完前，旧类名不能下线
- 新增 JS 逻辑一律只认新 BEM 名，不许再引用
.btn这类泛化名
真正难的不是语法转换，而是每次加新类名时多问一句：“这个类脱离当前上下文，还能被理解吗？”——BEM 的约束力，全在这一问里。一旦松口，三年后没人敢动它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
