重构旧CSS不是重写而是用BEM为类名“打身份证”，优先处理高危泛化类、混杂类和JS硬编码类，禁止后代选择器与嵌套元素，统一工具类前缀，组件中用classnames库和BLOCK常量保障一致性。
重构旧CSS样式表不是重写，而是用BEM规则把混乱的类名“打上身份证”，让每个样式归属明确、修改可控。盲目全局替换 .btn 为 button__text 会立刻导致页面错乱、JS绑定断裂、设计师标注失效——这不是重构，是爆破。
哪些类名必须优先动，哪些绝对不能碰
先筛出三类高危类名，它们才是重构的起点：
-
.btn、.card、.nav这类泛化命名：在 JS 中被document.querySelector('.btn')硬编码，在 HTML 中随意复用，还常搭配!important强行覆盖 - 高频修改文件里的混杂类名：比如
header.css或common.css中的.sidebar，git blame 显示多人反复修改，说明它已承载多个业务逻辑 - JS 里直接依赖的类名：全局搜索
document\.querySelector\(['"]\.[a-z]+['"]\)，找出所有被硬编码的类，这些要加别名过渡，不能直接删
跳过 .clearfix、.hidden 这类工具类，统一迁到 u-clearfix、u-hidden 前缀下，和 BEM 业务类物理隔离。
HTML结构不动，怎么安全套上BEM类名
老项目里 <div class="form"><input></div> 这种结构，硬拆成 form__input 会牵连 JS 事件绑定和表单校验逻辑。正确做法是原地加归属：
立即学习“前端免费学习笔记（深入）”；
- 把
class="form"改成class="login-form" -
<input>加class="login-form__input" - CSS 里只保留
.login-form__input规则，删掉所有孤立的.input - 禁止写
.login-form .input这种后代选择器——它默认你永远不重构父容器，而 BEM 的契约是“删掉login-form，子元素仍能渲染”
如果旧 HTML 里已有 class="btn btn-red"，先保留 btn-red 作别名，新代码只用 button--primary，逐步替换。
SCSS嵌套怎么写才不破坏BEM语义
&__icon 看着省事，但一不小心就写出 &__input &__icon（带空格），编译出来是后代选择器，等于悄悄绕过 BEM 隔离。
- 只允许单层嵌套：
.search-form { &__input {} &--compact {} } - 禁止
&__input { &__icon {} }—— 这会生成.search-form__input__icon，违反 BEM 元素不可嵌套原则 -
@extend禁用跨 block：哪怕.button--small和.input--small样式相同，也必须各自定义，否则修改一处，两处同时崩 - 变量名同步 BEM 化：
$button-padding-vertical，而不是$padding-sm，避免团队误以为它是全局尺寸标准
Vue/React组件里怎么避免手动拼接BEM类名
写 className={`button ${isDisabled ? 'button--disabled' : ''}` 看似灵活，实际埋了坑：拼错字符串、漏空格、状态组合爆炸（button--primary button--disabled vs button--primary--disabled）。
- 用
classnames库：classNames('button', { 'button--primary': isPrimary, 'button--disabled': isDisabled }) - 组件内定义常量：
const BLOCK = 'user-profile'，所有类名基于它派生，保证一致性 - 避免在 Styled Components 里写
&__icon—— 会破坏 BEM 的可预测性；也不要用 CSS Modules 自动哈希类名来“替代”BEM，那只是隐藏问题
BEM 的难点不在语法，而在 Block 边界的判断：看到 .user-list 要立刻问自己——它是否能独立渲染、有明确输入输出、不依赖父级 DOM 结构？否则就是伪 Block，后续所有命名都会失准。
