能结合，但必须让文件名、类名、JSX引用三者严格对齐，否则styles['button--primary']会是undefined且不报错；根本原因是CSS Modules哈希前缀依赖文件名，如Button组件须配Button.module.css，大小写或命名不符均导致键不存在。
直接说结论：能结合，但必须让文件名、类名、JSX引用三者严格对齐，否则styles['button--primary']会是undefined，且控制台不报错——这是最常踩的坑。
为什么styles['button--primary']返回undefined？
根本原因不是BEM写错了，而是CSS Modules的哈希前缀完全依赖文件名。比如组件叫Button，就必须用Button.module.css这个文件名；里面写.button--primary，JSX里才可以用styles['button--primary']。
- 文件名大小写不一致（如
button.module.css但JS里按Button访问）→styles.button--primary是undefined，但styles['button--primary']可能取得到（因为JS对象键不区分大小写？不，是构建时前缀错了） - CSS里写了
.btn--primary，但文件名是Button.module.css→ 构建后类名前缀是Button_，而styles['btn--primary']自然不存在 - 验证方法：打开
dist或.next/static/css里编译后的CSS文件，搜Button__或Button--；再console.log(styles)看输出里有没有你要的键
怎么安全生成BEM类名，避免手拼字符串？
手动写{`button ${isActive ? 'button--active' : ''}`}有三个硬伤：空格漏加、连字符写成-而非--、传入null或undefined导致多余空格。更严重的是，它绕过了CSS Modules的哈希校验——拼错就静默失效。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 封装一个绑定Block名的BEM工厂：
const bem = (block) => ({ e: (el) => `${block}__${el}`, m: (mod) => `${block}--${mod}` }); - 在组件内实例化：
const buttonBem = bem('button'); - 配合
classnames使用：className={cn( styles.button, buttonBem.m('primary'), { [buttonBem.e('icon')]: hasIcon } )} - 绝对不要解构
styles后拼接：${styles.button} ${styles['button--primary']}——后者为undefined时会拼出字面量"undefined"
postcss-bem-linter为什么不是可选插件？
它不是锦上添花的校验工具，而是防止BEM结构滑坡的底线。比如你在Button.module.css里不小心写了.modal__close，或者混用.card和.product-card，没有它，这些错误会悄无声息地进入代码库。
立即学习“前端免费学习笔记（深入）”；
- 它强制每个CSS文件只允许声明以文件名小写形式开头的Block（
Button.module.css→ 只能有.button*） - 配合
eslint-plugin-css-modules，能在编辑器里实时标红非法字符串类名（如className="button--active"在非Button组件中出现） - Modifier值必须受控：
buttonBem.m(theme)是危险的，theme应来自枚举或类型守卫，否则运行时可能生成不存在的类名
BEM的语义边界比CSS Modules的作用域更脆弱——文件名错一位、大小写差一个字母、手拼字符串少个连字符，样式就断了。真正起作用的从来不是“用了BEM”，而是构建链路里有没有硬性卡点把住这些细节。
