bem迁移须先识别三类隐式接口类名（.btn/.nav/.sidebar等）、混杂类及失控类，通过语义映射加别名过渡，禁用后代选择器，严格分层加载css并重置基础样式，block命名需体现功能闭环与明确归属。
不能从全局搜索替换 .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，逐步替换
BEM 类名写好了，为什么还是被旧样式覆盖
问题不在命名，而在层叠逻辑没理清：
-
<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等，避免继承污染
Block 名怎么定才不会埋三年雷
Block 不是视觉容器，而是功能闭环单元。看到 .user-list 要立刻判断：它是否能独立渲染、有明确输入输出、不依赖父级 DOM 结构？否则就是伪 Block：
- 合格 Block：
.search-form（含输入框+提交按钮+清空逻辑）、.notification-badge（含计数、角标、点击跳转） - 不合格 Block：
.section-2（纯视觉分组）、.left-sidebar（含位置词）、.red-text（含样式词） -
card❌ —— 全局冲突高；product-card✅ —— 明确归属，和user-card、cart-card天然隔离 -
product-card__footer__copyright❌ —— 超过两级 element，说明copyright已具备独立 Block 特征，应拆为copyright-block
真正容易被忽略的是：Block 名一旦定下，就锁死了整个模块的演进路径；改名成本远高于初期多花十分钟想清楚它到底“属于谁、干什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
