BEM 不是重命名工具，全局搜索替换 .btn/.card 必然导致样式崩坏、JS 断裂；应优先重构高频复用、无上下文、引发多处 bug 的模块，如被多个页面共用的 .nav 或依赖 .active 泄露的逻辑类，并通过语义映射而非结构重排落地。
直接全局搜索替换 .btn 或 .card 类名，90% 会导致线上样式大面积崩坏、JS 逻辑断裂、回滚困难——这不是操作问题，而是误把 BEM 当成重命名工具。
哪些模块该优先重构，而不是从全局搜索开始
别碰 .header、.list 这类泛化名。真正该动的是那些改完一个地方，第二天收到三张样式 bug 工单的模块：
- 被至少两个以上页面或组件复用，但类名无上下文（如
.nav在登录页和后台都用） - 开发者频繁加
!important或靠深层后代选择器（如.page .content .item a）才能覆盖 - 上线后偶发「弹窗按钮变宽」「侧边栏对齐错乱」，最后发现是另一个模块的
.active泄露覆盖 - JS 里大量出现
document.querySelector('.toggle')或el.classList.contains('error')，说明类名已被当作逻辑标识
怎么在不动 DOM 结构的前提下套上 BEM 类名
老项目 HTML 嵌套深、语义乱，硬拆结构会牵一发而动全身。务实做法是「语义映射」而非「结构重排」：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 原代码：
<div class="form"><input></div>→ 改为：<div class="form-item"><input class="form-item__input"></div> - 对应 CSS 中删掉所有孤立的
.input、.error规则，只保留.form-item__input和.form-item__input--error - 禁止写
.form-item .input这类后代选择器——它绕过 BEM 隔离，且未来无法迁移到 CSS Modules 或 Shadow DOM - 若旧 JS 依赖
.form input，先加临时 wrapper：<div class="legacy-form"></div>，CSS 里用.legacy-form .form-item__input过渡
Block 名怎么起才不埋雷
Block 名不是加前缀，而是定义归属边界。起错名字，三年后没人敢动它：
立即学习“前端免费学习笔记（深入）”；
-
card❌ —— 全局冲突高，别人写时根本不知道你在哪个业务域 -
product-card✅ —— 明确归属，和user-card、cart-card天然隔离 -
card--featured✅ —— Modifier 表达视觉变体；card--loading❌ —— 这是 JS 状态，不该由 CSS 类控制 - Block 必须是功能闭环单元：
.search-form合格（含输入框+提交按钮+清空逻辑），.section-2不合格（纯视觉分组）
最易被忽略的点：BEM 的价值不在“全量合规”，而在“新增代码可预期、旧代码可隔离”。哪怕只在一个新弹窗组件里严格用 modal__header、modal--fullscreen，也比花三天批量替换所有 .btn 更安全、更可持续。
