BEM落地失败主因是评审标准不明确，而非技术能力不足；须将规则转为机器可校验的边界，如用stylelint强制block__element--modifier格式、禁用泛义块名、禁止类型选择器，并通过CI拦截不合规范代码。
为什么BEM落地失败往往不是技术问题，而是“评审标准不明确”
团队说“支持BEM”，但代码里还满屏 .btn、.header、.active——根本原因不是没人学，是没人知道“什么算合规”。没有可量化的卡点，Code Review 就变成主观争论：“我觉得这个叫 user-card__avatar 比 card-avatar 好”，而不是“card-avatar 不符合 block__element 格式，stylelint 报错 plugin/selector-bem-pattern”。
真正起效的推广，是把规则翻译成机器可校验的边界：
- 所有新组件目录名即 block 名：
modal/下只允许出现modal、modal__header、modal--fullscreen - 禁止在 block 内部用类型选择器：
.card h3→ 必须写成.card__title - 修饰符只描述状态：
btn--loading✅，btn--in-sidebar❌（位置信息应由 wrapper 类承载） - 块名禁用泛义词：
main、content、box不允许作为 block 名；推荐dashboard-layout、user-profile-card
如何用 stylelint + CI 实现“不合规范的代码无法合入”
靠人眼盯类名拼写，永远漏检。必须让工具在 PR 阶段就拦截。关键不是装插件，而是配置它识别你团队的真实约束：
在 .stylelintrc.js 中启用 stylelint-selector-bem-pattern 插件，并严格限定 block 命名格式：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: ['stylelint-selector-bem-pattern'],
rules: {
'plugin/selector-bem-pattern': {
componentName: '[a-z][a-zA-Z0-9]+', // 强制小驼峰或中划线，禁用大驼峰、下划线开头
styleType: 'bem'
}
}
};
CI 脚本中加入校验命令：
npx stylelint "**/*.{css,scss,less}" --max-warnings 0
注意两个细节：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
--max-warnings 0：把 warning 当 error，避免“先 merge 再修”的侥幸 - 路径通配符要覆盖所有样式文件后缀，老项目若混用
.styl或.pcss，必须显式加上 - 本地开发时，VS Code 安装 Stylelint 插件并启用 auto-fix on save，让问题在编码阶段暴露
老项目怎么增量接入，又不让开发停工
全量重命名等于停摆一周，没人会执行。可行路径是守住新增、收敛旧边界、不推倒重来：
- 所有新组件（弹窗、筛选栏、用户卡片等）100% BEM，且目录即 block 名，例如
filter-panel/→ 只允许filter-panel、filter-panel__trigger等 - 高频冲突类（如全局
.table）先用 wrapper 包一层：<div class="data-table">…</div>，后续扩展全走data-table__row、data-table--striped - 遗留类（如
.nav）不急于改，但新增子项必须写成header-nav__item，逐步收口 - 第三方组件（Ant Design、Element Plus）用 wrapper 包裹：
<div class="order-list__ant-table-wrapper"><Table /></div>，再通过局部重置样式
React/Vue 中怎么避免手拼字符串导致的维护断裂
硬写 className="card__body" 或 JS 里 el.classList.add('card__body') 是最大隐患：重构块名时漏一处，样式就断，且 IDE 无法跳转、搜索失效。
正确做法是函数化生成，把 block 名抽成常量或 hook：
React 示例（用 clsx + 常量对象）：
const block = 'user-card';
const cn = (element, modifier) =>
`${block}__${element}${modifier ? '--' + modifier : ''}`;
// 使用
<div className={cn('avatar', 'large')}>...</div>
Vue 3 Composition API 示例（useBem hook）：
const bem = useBem('chart-container');
// 返回 { block: 'chart-container', element: (e) => `chart-container__${e}`, modifier: (m) => `chart-container--${m}` }
关键约束：
- 禁止在 JS 中拼接动态类名：
`card__${type}--${size}`→ IDE 无法索引，重构无保障 - 禁止 CSS-in-JS 库（如 styled-components）用插值生成类名，它绕过 BEM 约束，审查元素看到的是
sc-a1b2c3这类不可读名 - 每个 BEM block 必须对应独立样式文件，禁止跨文件定义同一 block 的样式（如
form.css里写button__text）
最易被忽略的点是：BEM 的双下划线和双破折号不是“风格偏好”，而是工具链识别边界的语法标记。写成 .menu_item 或 .button-disabled，PostCSS 插件、VS Code 自动补全、甚至构建时 CSS Scope 提取工具都会失效——这意味着你失去自动校验、类型提示、安全重命名的能力，最终退回到靠人肉 review 的低效协作。
