如何利用BEM规范重构陈旧的CSS项目以提高复用性？-css教程-PHP中文网

优先重构高冲突模块而非全局搜索：被多页面复用但类名无上下文（如.nav）、频繁依赖!important或深层选择器覆盖、引发样式泄露（如.active错乱）及js逻辑耦合（如document.queryselector('.toggle')）的模块。

如何利用bem规范重构陈旧的css项目以提高复用性？

直接重构旧项目 CSS 用 BEM，大概率会让线上样式崩一半、JS 逻辑断三处——这不是规范问题，是落地节奏错了。

别碰 .header、.list 这类泛化名。真正值得先改的，是那些你改完一个地方，第二天收到三张样式 bug 工单的模块：

被至少两个以上页面或组件复用，但类名无上下文（比如 .nav 在登录页和后台都用）
开发者频繁加 !important 或靠深层后代选择器（如 .page .content .item a）才能覆盖
上线后偶发「弹窗按钮变宽」「侧边栏对齐错乱」，最后发现是另一个模块的 .active 泄露覆盖
JS 里大量出现 document.querySelector('.toggle') 或 el.classList.contains('error')，说明类名已被当作逻辑标识

老项目 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 名不是加前缀，而是定义归属边界。起错名字，三年后没人敢动它：

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 权重太高：

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）要明确区分，避免语义污染