React 18中BEM类名静默失效源于CSS Modules映射校验被字符串绕过，需确保文件名、CSS类名、JSX访问三者严格一致，并用bem工厂函数固化Block名、classnames配合styles对象调用，配合postcss-bem-linter拦截反模式。
React 18里直接拼字符串写BEM类名会静默失效
不是React版本问题，而是CSS Modules + BEM组合下，手写className="button__icon button--loading"这类字符串会绕过样式映射校验。一旦文件名、类名、JSX访问三者不严格对齐，styles.button__icon就返回undefined，但控制台不报错，DOM里只显示空class=""。
常见错误包括：
• 文件叫Button.module.css，但CSS里写了.btn__icon
• JSX中写styles['button__icon']，而CSS里是.Button__icon（大小写不一致）
• 用点号访问styles.button__icon，实际必须用方括号styles['button__icon']
- 文件名必须PascalCase且与组件名完全一致：如
Card.tsx↔Card.module.css - CSS中所有类名必须以
.card开头，禁止.ui-card或.product-card - Element必须用双下划线：
.card__header✅，.card-header❌
用bem工厂函数固化Block名，别靠人脑记格式
写button--${variant}容易漏连字符、拼错variant值，TypeScript也拦不住。必须把Block名锁死，再派生Element和Modifier。
一个轻量级工厂示例：
立即学习“前端免费学习笔记（深入）”；
const bem = (block) => ({
e: (el) => `${block}__${el}`,
m: (mod) => `${block}--${mod}`
});
const buttonBem = bem('button');
这样调用才安全：
-
buttonBem.e('icon')→'button__icon' -
buttonBem.m('primary')→'button--primary' -
buttonBem.e('icon').m('loading')→'button__icon--loading'（注意：BEM规范中Element下挂Modifier是允许的，但需团队明确约定）
classnames + CSS Modules组合时，所有参数必须来自bem函数
混用会导致类型失控和哈希失效。比如传入'button'字面量，CSS Modules无法把它转成Button_button__abc123。
正确写法（假设styles已从Card.module.css导入）：
import clsx from 'clsx';
// ...
className={clsx(
styles.card,
styles[buttonBem.m('fluid')],
hasHeader && styles[buttonBem.e('header')]
)}
- 禁止：
clsx('card', { 'card--fluid': isFluid })—— 字符串绕过styles映射 - 禁止：
clsx(styles.card, `card__header--${status}`)—— 插值破坏类型约束 - 必须确保
buttonBem.m('fluid')返回的字符串，和CSS文件中声明的.card--fluid逐字匹配（含大小写）
postcss-bem-linter是构建阶段的硬性守门员
没有它，团队两周内就会出现.button__icon--large--dark或.button .icon这类反模式。它不是锦上添花，是防止BEM滑坡的底线。
它能拦截：
-
.button__icon--loading--error（Modifier嵌套） -
.button-icon（缺少双下划线，被识别为独立Block） -
.button__content .button__icon（后代选择器，破坏封装） -
Button.module.css里出现.modal__close（跨Block引用）
BEM在React 18项目里不是“写得更规范”，而是让每个类名都成为可搜索、可定位、可校验的契约——文件名错一个字母，styles['card__header']就永远是undefined，没人会提醒你，只有样式消失。
