直接全局搜索替换旧类名大概率导致样式和交互崩溃，因旧项目存在语义混杂、JS硬编码、CSS权重失控等问题；应先通过grep确认上下文，HTML中保留旧类注释，JS改用[class*="xxx"]临时兼容，BEM CSS需后加载或用@layer分层，并优先在新增/高频模块渐进启用。
直接全局搜索替换旧类名大概率会让页面样式和交互同时崩溃，不是BEM有问题，而是旧项目里类名语义混杂、JS硬编码绑定、CSS权重失控——得先守住边界，再一点点换。
旧类名能不能用正则批量替换成BEM格式
不能信“一键替换”脚本。真实项目中，.btn可能是按钮、链接、标签，也可能被el.classList.contains('btn')在JS里判断，还可能出现在data-class="btn"这种非标准位置。
- 先用
grep -r "\.btn" src/ --include="*.html" --include="*.js" --include="*.css"确认所有上下文 - HTML中替换时保留旧类名作注释：
<button class="btn /* legacy */ button__base button--primary"></button> - JS中临时兼容：
document.querySelector('[class*="btn"]')比querySelector('.btn')更安全，但只是过渡手段 - 真正要删掉旧类名前，必须确认所有
querySelector、classList.toggle、埋点上报、服务端模板渲染都已迁移
新旧类名共存时样式为什么还是炸
因为旧CSS大量使用#header .nav li a:hover这类高权重选择器，甚至带!important，而.header__nav-link--hover权重根本压不住它。
- 确保BEM CSS在HTML中
<link>顺序严格位于旧CSS之后（哪怕只是逻辑上后加载） - 用
@layer显式分层：@layer legacy { /* 旧规则 */ }+@layer bem { /* 新BEM规则 */ }，现代浏览器按层覆盖 - 对旧DOM容器加命名空间根类，如
legacy-header，并在其CSS开头写.legacy-header { all: unset; }（慎用，仅限强污染场景） - 新BEM组件必须显式重置基础样式：
box-sizing: border-box、margin: 0、padding: 0，避免继承旧全局重置的副作用
哪些地方适合优先启用BEM重命名
别从最熟悉的.header或.btn下手，从新增、高频修改、复用失败的模块切入，影响面最小、收益最可见。
立即学习“前端免费学习笔记（深入）”；
- 全新功能模块：比如刚加的
search-suggestion组件，就严格用search-suggestion__item、search-suggestion--loading - 高频修改区域：比如表单校验提示，把散落的
.error、.input-error、.error-text全部归入form-item__input--error体系 - 已明确复用失败的组件：比如
.card在不同页面表现不一致，就提取为product-card并收敛其所有子元素类名 - 旧页面做“BEM边界封装”：把老DOM包裹进
legacy-dashboard，内部仍用旧类，但外部只通过legacy-dashboard__refresh-btn暴露钩子
最容易被忽略的是JS层的耦合：一个is-active类名可能同时被CSS控制样式、JS控制状态、埋点系统识别行为。重命名前，得先查清它在哪被读、哪被写、哪被发——否则换完类名，按钮点不动了，谁也想不到是埋点SDK里卡着if (cls.includes('is-active'))没改。
