必须优先识别并隔离.btn、.nav、.sidebar等泛化类名，因其在旧项目中实际充当JS硬编码绑定和高权重CSS覆盖的隐式接口，直接全局替换将导致样式崩坏与JS断裂。
哪些类名必须先停手，别碰
直接全局搜索替换 .btn、.nav、.card 这类泛化名，90% 会触发样式崩坏和 JS 断裂。它们在旧项目里不是“样式类”，而是隐式接口：JS 可能正用 document.querySelector('.btn') 绑定事件，CSS 可能靠 #main .content .item a:hover 这种高权重规则强行覆盖。先用这条命令筛出所有硬编码点：
grep -r "document\.querySelector\(['\"].*\.[a-z]\+['\"]\)" src/ --include="*.js"
结果里的每个类名，都不能删，只能加 BEM 别名过渡。
HTML 不动结构，怎么安全加 BEM 类名
老项目 DOM 嵌套深、语义乱，硬拆结构会牵连表单校验、事件委托和 SSR 渲染。务实做法是「语义映射」：
- 原代码：
→ 改为： - CSS 中立刻删掉所有孤立的
.input、.error规则，只保留.login-form__input和.login-form__input--error - 禁止写
.login-form .input这类后代选择器——它默认父容器永不变更，而 BEM 的契约是“删掉login-form，子元素仍能渲染”
@layer 和加载顺序怎么配才不被旧 CSS 压住
新写的 .button__text 样式还是被 #header .nav li a:hover 覆盖？问题不在命名，在层叠逻辑没理清：
-
必须严格位于旧 CSS 之后（哪怕只是逻辑上后加载） - 用
@layer显式分层：@layer legacy { /* 旧规则 */ }+@layer bem { /* 新 BEM 规则 */ }，现代浏览器按层覆盖 - 对强污染的旧容器（如
.legacy-header { all: unset; }（慎用，仅限紧急场景） - 新 BEM 组件必须显式重置基础样式：
box-sizing: border-box、margin: 0、padding: 0，避免继承旧全局重置的副作用
Block 名怎么起才不会三年后没人敢动
Block 名不是加前缀，而是定义归属边界。起错名字，后续迭代就卡死：
-
card❌ —— 全局冲突高，别人写.card__title时根本不知道你在哪个业务域 -
product-card✅ —— 明确归属，和user-card、cart-card天然隔离 -
card--featured✅ —— Modifier 表达视觉变体；card--loading❌ —— 这是 JS 状态，不该由 CSS 类控制 -
product-card__footer__copyright❌ —— 超过两级 element，说明copyright已具备独立 Block 特征，应拆为copyright-block - 历史遗留的
.clearfix、.hidden，统一迁移到u-clearfix、u-hidden，和 BEM 业务类严格分离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
