如何用classnames管理React中的CSS BEM Modifier

所有 BEM Modifier 必须由 bem 工厂函数生成，禁止手写字符串；CSS Modules 下需通过 styles[bem.m('mod')] 获取真实类名；多 modifier 需单独调用并传入 classNames；构建时应启用 postcss-bem-linter 和 eslint-plugin-css-modules 拦截非法用法。

classnames 传入 BEM Modifier 必须用函数生成，不能手写字符串

直接写 classNames('button--primary', { 'button--disabled': disabled }) 看似省事，但会绕过 BEM 结构校验，导致 modifier 值拼错（比如 button--prmiary）、漏连字符、或混入非法组合（如 button__icon--primary 这种 Element 下挂 Modifier）。TypeScript 也完全无法捕获这类错误。

1. 所有 modifier 类名必须由 bem 工厂函数派生，例如 buttonBem.m('primary') 或 buttonBem.modifier('disabled')
2. 禁止在 classNames 参数中出现任何字面量字符串修饰符，包括插值形式：`button--${variant}` 是危险信号
3. 如果用了 TypeScript，建议给 bem 函数加泛型约束，比如 bem('button')，其中 ButtonModifier = 'primary' | 'secondary' | 'danger'

CSS Modules 场景下，BEM Modifier 要先查 styles 对象再传给 classnames

在 Button.module.css 中，buttonBem.m('primary') 返回的是原始类名 button--primary，不是最终哈希后的类名。直接传给 classNames 会导致样式丢失——因为 DOM 上实际渲染的是类似 Button_button--primary__abc123 这样的名字。

1. 正确做法是：用 styles[buttonBem.m('primary')] 获取真实类名，再传入 classNames
2. 错误写法：classNames(styles.button, 'button--primary') —— 字符串 'button--primary' 不会命中 styles 对象，也不受 CSS Modules 作用域保护
3. 推荐封装一层工具函数，比如 cn(buttonBem.m('primary'))，内部自动做 styles[...] 查找，避免每个组件都重复写

多个 Modifier 同时生效时，不要用对象 key 拼接字符串

常见错误是把多个 modifier 写成一个对象 key：{ ['button--primary button--large']: true }。这会让 classNames 把整个字符串当做一个类名处理，而 CSS Modules 的 styles 对象里根本不存在这个键，结果就是白屏级失效。

1. 每个 modifier 都要单独调用 bem.m()，然后分别传入 classNames：classNames(styles.button, buttonBem.m('primary'), buttonBem.m('large'))
2. 如果 modifier 之间有互斥逻辑（比如 size 和 variant 不能共存），用对象语法更安全：{ [styles[buttonBem.m('primary')]]: variant === 'primary', [styles[buttonBem.m('large')]]: size === 'large' }
3. 注意：CSS Modules 不支持空格分隔的多类名字符串作为单个 key，它只认精确匹配的键名

postcss-bem-linter 能拦住 modifier 误用，但只在构建阶段起作用

它不会报错说 “你写了 button__label--disabled”，但它会拒绝这种写法——因为 BEM 规范里 Element（__label）下面不允许挂 Modifier（--disabled）。这类问题 runtime 完全无提示，只能靠构建时拦截。

1. 启用后，它会报错：.button__label--disabled（Element 下挂 Modifier）、.button-icon（缺双下划线）、.button .icon（带空格后代选择器）
2. 配合 eslint-plugin-css-modules 可进一步限制 JSX 中只能使用当前模块声明过的 BEM 键名，比如 styles.button__icon 存在才允许用，styles.modal__close 直接报 ESLint 错误
3. 别跳过这步：没有 linter，团队协作中 modifier 的语义边界很快就会塌缩成一堆不可维护的手写字符串

BEM Modifier 看似只是加个连字符，但真正难的是守住 block 边界和 modifier 语义范围——一旦松动，就退化成普通 class 拼接，失去 BEM 的可维护价值。