BEM落地失败主因是未与构建、工具链和协作流程深度绑定。手写类名在CI中因大小写敏感、空格遗漏、连字符错位导致样式失效，SSR hydration mismatch更会引发整块DOM重绘；须禁用手拼，统一用校验型封装函数，并通过ESLint、Stylelint强制约束规则、SCSS平铺书写及CSS变量命名对齐实现工程闭环。
直接上结论：BEM 落地失败，90% 不是因为写法不对，而是没把类名和构建、工具链、协作流程绑死。
为什么手写 BEM 类名在 CI 环境下必挂
本地开发时拼字符串 className="button button--primary" 看似没问题，但 Linux 构建时大小写敏感、空格遗漏、连字符错位都会导致 class 丢失或错配。更隐蔽的是 SSR hydration mismatch：服务端渲染出 user-card__avatar，客户端 JS 拼出 userCard__avatar（驼峰误用），React 就会重绘整块 DOM。
实操建议：
- 禁用所有手拼字符串，统一用封装函数，比如
cn('user-card', 'avatar', 'large')返回user-card__avatar--large - 函数内部必须校验参数合法性：
cn('')或cn('card', '__header')应直接抛错，不静默容忍 - 在 ESLint 中接入
eslint-plugin-bem，拦截.card-header这类非 BEM 写法
stylelint-selector-bem-pattern 怎么配才不形同虚设
只装插件不配规则等于没装。默认配置允许 .btn 这种裸名，也接受 .card__title__link 这种非法三层嵌套，起不到防护作用。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 规则必须设为
{"componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem"}，强制块名小写+字母数字，拒绝CardHeader或_header - CI 流程中加
npx stylelint "**/*.{css,scss}" --fix，失败即中断构建 - 配合 VS Code 的
stylelint-plus插件，保存即标红.header .logo这类后代选择器
SCSS 嵌套写法如何不破坏 BEM 封装性
.card { .title { } } 编译后是 .card .title，这不是 BEM，是传统嵌套陷阱——它既无法反向定位来源文件，又让 .title 失去块上下文，一旦其他模块也定义 .title，样式就打架。
实操建议：
- SCSS 中禁止用嵌套生成后代选择器；可用
@function bem()辅助生成类名，例如：@function bem($block, $element: null, $modifier: null) { $result: $block; @if $element { $result: #{$block}__#{$element}; } @if $modifier { $result: #{$result}--#{$modifier}; } @return $result; } .card { &__title { font-size: var(--space-md); } } - 所有元素和修饰符样式必须平铺书写，哪怕多写几行 ——
.card__title和.card__title--large必须出现在同一层级 - 用
@layer components把 BEM 类名锁进固定层，防止被@layer base里的通配规则覆盖
组件级 CSS 变量怎么和 BEM 类名对齐
变量名 --ui-button-bg-primary 和类名 .button--primary 不一致，会导致团队新人查不到变量来源，IDE 补全失效，PurgeCSS 也无法安全剔除未用变量。
实操建议：
- 变量命名严格对应 BEM 结构：
.button--primary→--ui-button-bg-primary，.button__icon--spin→--ui-button-icon-rotate - 变量注入点必须是组件根节点：
<button class="button button--primary">上设style="--ui-button-bg-primary: #007bff"，而非全局:root - 禁用布尔型变量如
--is-loading；状态切换靠 class 控制，变量只管值：.button--loading { background-color: var(--ui-button-bg-loading); }
BEM 最容易被忽略的点，是它根本不是“怎么命名”的问题，而是“谁有权改名”“改了之后哪些地方必须同步”“CI 怎么拦住违规提交”的工程闭环。一个没绑定 lint、没封装类名生成、没约束变量命名的 BEM，三个月后就会退化成带双下划线的混乱命名。
