先检查文件名和类名是否对齐：Button.module.css中必须写.button--primary，JSX中用styles['button--primary']，大小写、命名需完全一致，否则返回undefined。
styles['button--primary']报undefined？先检查文件名和类名是否对齐
CSS Modules的类名映射完全依赖文件名作为Block根，Button.module.css里写.button--primary，JSX里必须用styles['button--primary']——不能写成styles.button--primary（语法错误），也不能写成styles['Button--primary']（大小写/命名不一致）。常见错误是CSS里写了.btn--primary，但文件名是Button.module.css，导致styles['btn--primary']始终为undefined。
验证方法：打开编译后的CSS文件，看生成的类名前缀是不是Button_开头；再确认console.log(styles)输出里是否存在你要访问的键。
- 文件名必须全小写、无特殊字符，且与Block语义一致：
Card.module.css→ 所有类以.card开头 - 不允许在CSS里混用
.card和.product-card，否则BEM结构断裂 - 开发时开启
localIdentName=[name]__[local]___[hash:base64:5]，便于调试时一眼识别来源
怎么安全拼接BEM修饰符？别手写字符串，用classnames + 封装函数
手动拼{`button ${isActive ? 'button--active' : ''} ${hasIcon ? 'button__icon' : ''}`}容易漏空格、错连字符、传入null或undefined导致多余空格。更糟的是，它绕过了CSS Modules的哈希校验，一旦类名拼错，样式就静默失效。
正确做法是封装一个BEM生成器，绑定到当前Block：
立即学习“前端免费学习笔记（深入）”；
const bem = (block) => ({
e: (el) => `${block}__${el}`,
m: (mod) => `${block}--${mod}`
});
const buttonBem = bem('button');
再配合classnames使用：
import cn from 'classnames';
// ✅ 安全、可读、自动过滤falsy值
className={cn(
styles.button,
buttonBem.m('primary'),
{ [buttonBem.e('icon')]: hasIcon },
{ [styles['button--loading']]: isLoading }
)}
- 不要解构
styles后直接拼：${styles.button} ${styles['button--primary']}—— 当后者不存在时会拼出undefined - 修饰符值必须受控：避免
buttonBem.m(theme)这种写法，theme应来自枚举或类型守卫 - Element和Modifier不能嵌套：
button__icon--large是反模式，应拆成button__icon button__icon--large
为什么postcss-bem-linter不是可选插件？
它不是锦上添花的校验工具，而是防止BEM结构滑坡的底线。没有它，团队很快就会出现：.card-header（该用.card__header）、.card__content--disabled（修饰符不该挂在Element下）、.card--size-large--theme-dark（多层修饰符失控）。
配置它之后，任何违反BEM层级的写法都会在构建时报错，比如：
- 在
Card.module.css里写.ui-card→ 报错：Block name must match filename - 写
.card__header--hovered→ 报错：Modifier must be on Block level - 写
.card-footer（没双下划线） → 报错：Element selector must use double underscore
它强制把命名约束从“靠人自觉”变成“机器拦截”，尤其在多人协作或老项目改造时，省去大量Code Review成本。
和第三方组件库共用BEM时，别强行加button--primary
像Ant Design或MUI这类库，它们内部根本不认你的button--primary类名。你加了也没用，除非用!important覆盖，但那会破坏样式优先级逻辑，也违背BEM的封装原则。
可行方案只有两种：
- 用库提供的
className透传入口，把BEM类名塞进去（如Button className={cn(styles.button, buttonBem.m('primary'))}），前提是库支持class合并 - 放弃BEM，改用库自身的主题系统（如MUI的
variant="contained"），再通过createTheme定制底层样式
硬套BEM到外部组件上，本质是把样式责任错配——BEM管的是你自己的组件结构，不是别人的渲染逻辑。这点最容易被忽略，却直接决定项目长期可维护性。
