BEM在迭代快时易被弃用，因命名冗长（如block__element--modifier比header-btn多近一倍字符），开发者倾向先跑通再命名；两周后复用样式时因未落地BEM导致多处重复CSS，组件复用性崩溃。
为什么BEM在迭代快时反而容易被弃用
因为 block__element--modifier 命名写起来比 header-btn 多敲近一倍字符，而CR/合并/上线节奏压得紧，开发者会本能选择“先跑通再命名”。但真正踩坑是在两周后：改一个按钮样式，发现它同时被 user-card__btn、form__submit、modal-action 三处复用，却各自写了独立CSS——BEM没落地，组件复用性就塌了。
用 ESLint + stylelint 自动拦截非BEM类名
手动检查靠不住，必须让工具在保存/提交前报错。关键不是装插件，而是配对规则：
-
stylelint-selector-bem-pattern要设componentName为小驼峰（如userProfile），否则user-profile__item会被判错 -
eslint-plugin-react的jsx-a11y/no-static-element-interactions和 BEM无关，别误开——它只管可访问性，开了反而干扰 - VS Code 里启用
editor.codeActionsOnSave自动修复，但stylelint的 autofix 对嵌套&__elem不可靠，建议关掉自动修复，只保留报错
把BEM结构固化进脚手架模板
每次新建组件都手写 Button.jsx + Button.module.css + Button.stories.js 太慢。直接在脚手架里预置带BEM骨架的模板：
/* Button.module.css */
.Button {
/* block */
}
.Button__label {
/* element */
}
.Button--primary {
/* modifier */
}
.Button--disabled .Button__label {
/* modifier + element 组合，合法 */
}注意：.Button--primary.Button__label 是非法写法（两个class平级无嵌套关系），工具不会拦，但会导致样式覆盖混乱——这是高频迭代中最常漏检的逻辑错误。
立即学习“前端免费学习笔记（深入）”；
设计师交付切图时同步提供BEM语义标注
UI走查阶段，设计师用Figma插件（如 css-generator）导出带 data-bem 属性的HTML片段，例如：
<button class="Button Button--secondary" data-bem="Button--secondary"> <span class="Button__label">取消</span> </button>
前端拿到后直接按 data-bem 值映射到对应CSS类，省去猜命名。但要注意：Figma导出的 Button__text 若和开发约定的 Button__label 冲突，必须以代码仓库里的 Button.module.css 为准——设计稿是参考，不是契约。
BEM不是命名洁癖，是给CSS加一层可预测的“接口契约”。最易忽略的点是：modifier 必须作用于 block 级 class，不能跳过 block 直接修饰 element；否则 .Card__header--large 这种写法，会让 .Card--compact .Card__header 的样式优先级失控。
