bem + classnames是react中管理css类名的刚需组合，前者规范命名结构，后者负责条件合并，二者分工明确、不可替代。
为什么BEM + classnames组合在React里不是“锦上添花”，而是刚需
纯字符串拼接类名会快速失控，尤其当组件要支持block、element、modifier三层结构时。比如menu__item--disabled这种命名，手动拼接极易漏空格、错连字符、混淆层级。而classnames本身不关心命名规范，它只负责“合并+过滤falsy值”，所以BEM的结构必须靠人来组织，classnames只做最后的组装——二者是分工关系，不是替代关系。
用函数封装BEM前缀，避免重复写menu__和menu--
直接在组件里硬写{'menu__item': true, 'menu__item--hovered': isHovered}太冗长，也违背BEM复用原则。推荐封装一个生成器函数：
const bem = (block) => {
return (element, modifier) => {
if (element && modifier) return `${block}__${element}--${modifier}`;
if (element) return `${block}__${element}`;
if (modifier) return `${block}--${modifier}`;
return block;
};
};
const menuBem = bem('menu');
然后在组件中使用：
const className = classnames(
menuBem(), // 'menu'
menuBem('item'), // 'menu__item'
{ [menuBem('item', 'active')]: isActive }, // 'menu__item--active'
{ [menuBem('item', 'disabled')]: isDisabled } // 'menu__item--disabled'
);
- 每个
menuBem调用都返回一个确定的字符串，classnames只负责判断是否加入最终结果 - 不建议把
menuBem做成全局工具函数——不同模块的block名可能冲突，应在组件或目录级定义 - 如果用了CSS Modules，
menuBem应改为接收styles对象，返回styles['menu__item']等键值，而非字符串
处理Modifier状态时，别把布尔逻辑塞进classnames参数里
常见错误写法：{'menu--dark': theme === 'dark' || isForcedDark}——这会让条件耦合在类名层，难以测试和复用。正确做法是提前计算好状态变量：
const isDarkTheme = theme === 'dark' || isForcedDark;
const className = classnames(
'menu',
{ [menuBem('', 'dark')]: isDarkTheme },
{ [menuBem('', 'compact')]: layout === 'compact' }
);
-
classnames只做“开关”，不做“判断”；状态计算应放在JSX上方或自定义Hook里 - Modifier名尽量语义化（如
dark、compact），避免用isDark这种带前缀的命名，否则类名变成menu--isDark就违背BEM了 - 多个Modifier共存时，
classnames自动去重、忽略false，不用额外filter数组
CSS Modules场景下，classnames必须配合bind或手动映射
如果你用import styles from './Menu.module.css'，那menuBem返回的字符串（如menu__item）不会自动对应到styles['menu__item']的哈希值。此时不能直接传字符串给classnames：
// ❌ 错误：字符串不会被CSS Modules解析
className={classnames('menu', 'menu__item', {'menu__item--active': isActive})}
// ✅ 正确：用styles对象的键，或用classnames/dedupe + bind
import styles from './Menu.module.css';
import cx from 'classnames/bind';
const cxMenu = cx.bind(styles);
const className = cxMenu(
'menu',
'menu__item',
{ 'menu__item--active': isActive }
);
-
classnames/bind返回的函数会自动将类名字符串映射为CSS Modules编译后的哈希名 - 不推荐用
styles['menu__item']手动取值——一旦CSS文件改名或删除，TS/JS不会报错，运行时才丢样式 - 如果项目混合使用全局CSS和CSS Modules，建议按模块拆分
cx实例，避免命名污染
BEM结构越深，手动拼接出错概率越高；classnames越早介入状态过滤，后期调试越省力。真正容易被忽略的是：BEM的block边界必须由组件职责决定，而不是由classnames调用位置决定——一个Button组件内部不该生成menu__item类名，哪怕它“看起来一样”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
