React组件化开发中如何规范编写BEM风格的CSS-css教程-PHP中文网

css modules文件名必须与react组件名严格一致（如card组件对应card.module.css），类名须以.block为前缀，禁止混用多block或手写bem字符串，须通过bem工厂函数和classnames安全生成classname。

react组件化开发中如何规范编写bem风格的css

React组件中CSS Modules文件名必须与Block名严格一致

文件名就是Block根，错一个字母或大小写，styles对象里就找不到对应类名。比如组件叫Card，CSS文件必须是Card.module.css，里面只能写.card、.card__header、.card--loading这类以.card开头的类——不能写.ui-card或.product-card，否则styles['card__footer']返回undefined，且控制台不报错。

常见错误现象：console.log(styles)输出里没有card__footer，但CSS里明明写了；或者styles.card__footer是undefined，但styles['card__footer']能取到——说明文件名大小写不匹配（如文件是card.module.css，JS里却按Card访问）。

验证方法：打开编译后生成的CSS文件，看类名前缀是不是Card_开头。开发期建议配置localIdentName=[name]__[local]___[hash:base64:5]，调试时一眼看出来源。

禁止在单个CSS文件里混写多个Block

同一个.module.css文件里只允许出现一种Block前缀。比如.card和.button不能共存于Card.module.css中——这会破坏BEM的边界隔离，也让postcss-bem-linter无法校验结构合法性。

常见错误场景：

把通用工具类（如.clearfix、.sr-only）直接塞进Button.module.css
为兼容第三方库，在Modal.module.css里写.ant-modal-body
把子组件样式（如CardHeader）全挪进Card.module.css，导致文件膨胀且职责不清

正确做法：通用工具类统一收口到src/styles/tools.css并用@layer base声明；第三方样式通过wrapper class隔离；子组件应独立成块，各建CardHeader.module.css。

所有className必须经bem工厂函数生成，禁用手写字符串

手写card ${isHovered ? 'card--hovered' : ''}有三个硬伤：漏空格、拼错连字符（比如card-hovered）、isHovered值为null时留下多余空格。更关键的是，它绕过类型检查和BEM结构约束。

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

正确做法是封装一个绑定Block名的生成器：

const bem = (block) => ({
  e: (el) => `${block}__${el}`,
  m: (mod) => `${block}--${mod}`
});
const cardBem = bem('card');

然后统一交给classnames处理：

import cn from 'classnames';
className={cn(
  styles.card,
  cardBem.m('loading'),
  { [styles[cardBem.e('footer')]]: hasFooter }
)}

要点：

所有传给classnames的值必须来自cardBem，禁止混入字面量字符串（如'card--disabled'）
cardBem.e('footer')返回'card__footer'，再通过styles[]查真实哈希名，而不是直接写styles.card__footer（硬编码风险）
每个组件内只调一次bem('card')，返回的e/m是稳定引用，无重渲染开销