如何用CSS的BEM命名规范重构大型项目样式
重构不是重写，而是用BEM给类名打“身份证”；必须优先处理泛化命名、高频混杂类及JS硬编码类，禁用后代选择器与跨block@extend，通过别名过渡、SCSS单层嵌套及工具链校验保障安全迁移。
重构大型项目样式不是重写 CSS，而是用 BEM 给每个类名打上可追溯、可隔离、可协作的“身份证”。盲目全局替换 .btn 为 button__text 会导致 JS 绑定断裂、样式错乱、CI 构建失败——这不是重构，是事故。
哪些类名必须优先动，哪些绝对不能碰
先筛出三类高危类名，它们才是重构起点：
-
.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' : ''}`} 是最高危破规点。本地开发看着能跑通，但 CI 构建环境对空格、大小写、连字符更敏感，button__icon_error 少个 - 或多一个空格，就变成无效类名，样式失效且无提示。
- 用
clsx或classnames库：cn('button', { 'button--disabled': isDisabled }) - 组件内定义 BLOCK 常量：
const BLOCK = 'login-form'，然后用cn(`${BLOCK}__submit`, { [`${BLOCK}__submit--loading`]: loading }) - 禁止在 JSX 中手拼
--或__，所有组合必须来自预定义字符串或工具函数
真正难的不是写对一个类名，而是让所有人每次敲 class= 时，大脑自动触发 BEM 语义检查——这需要 pre-commit 钩子里的 stylelint、CI 中的 npx stylelint "/*.{css,scss}"、以及 PR 模板里强制填写「本次修改涉及哪些 block 的类名变更」。漏掉任一环，规范就只是文档里的一行字。
