优先重构高冲突模块而非全局搜索：被多页面复用但类名无上下文（如.nav）、频繁依赖!important或深层选择器覆盖、引发样式泄露（如.active错乱）及JS逻辑耦合（如document.querySelector('.toggle')）的模块。
直接重构旧项目 CSS 用 BEM，大概率会让线上样式崩一半、JS 逻辑断三处——这不是规范问题，是落地节奏错了。
哪些模块该优先动，而不是全局搜 .btn
别碰 .header、.list 这类泛化名。真正值得先改的，是那些你改完一个地方，第二天收到三张样式 bug 工单的模块：
- 被至少两个以上页面或组件复用，但类名无上下文（比如
.nav在登录页和后台都用） - 开发者频繁加
!important或靠深层后代选择器（如.page .content .item a）才能覆盖 - 上线后偶发「弹窗按钮变宽」「侧边栏对齐错乱」，最后发现是另一个模块的
.active泄露覆盖 - JS 里大量出现
document.querySelector('.toggle')或el.classList.contains('error')，说明类名已被当作逻辑标识
怎么在不动 DOM 结构的前提下套上 BEM 类名
老项目 HTML 嵌套深、语义乱，硬拆结构会牵一发而动全身。务实做法是「语义映射」而非「结构重排」：
- 原代码：
<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过渡
product-card 为什么比 card 更安全
Block 名不是加前缀，而是定义归属边界。起错名字，三年后没人敢动它：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
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 业务类严格分离
新写的 BEM CSS 还是被旧样式压住？先查权重
不是 BEM 写错了，是旧 CSS 权重太高：
- ID 选择器（
#header）、!important、深层后代选择器（.page .content .btn）都会碾压.button--primary - 检查是否用了
@extend跨 block 复用样式，比如把.button--small和.input--small共用同一个占位符——BEM 要求各自定义 - 动态生成类名时（如 React 的
className={`button ${isDisabled ? 'button--disabled' : ''}`}），必须校验mod非空且过滤非法字符，否则产出.btn--这种无效类，样式静默失效 - 每个 HTML 元素只允许一个 BEM class，即最多一个 block、一个 block__element 或一个 block--modifier；混入工具类（如
text-center）要明确区分，避免语义污染
最常被忽略的是：Modifier 名一旦进入 HTML，就等于向所有协作方承诺了它的稳定性和语义边界——改一个 button--hover 的行为，可能影响五个页面的交互反馈逻辑。
