怎么在React项目结合CSS Modules与BEM规范？-css教程-PHP中文网

能结合，但必须让文件名、类名、JSX引用三者严格对齐，否则styles['button--primary']会是undefined且不报错；根本原因是CSS Modules哈希前缀依赖文件名，如Button组件须配Button.module.css，大小写或命名不符均导致键不存在。

怎么在react项目结合css modules与bem规范？

直接说结论：能结合，但必须让文件名、类名、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-app-react-router

构建 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”，而是构建链路里有没有硬性卡点把住这些细节。