所有 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 也完全无法捕获这类错误。
- 所有 modifier 类名必须由
bem工厂函数派生，例如buttonBem.m('primary')或buttonBem.modifier('disabled') - 禁止在
classNames参数中出现任何字面量字符串修饰符，包括插值形式：`button--${variant}`是危险信号 - 如果用了 TypeScript，建议给
bem函数加泛型约束，比如bem<buttonmodifier>('button')</buttonmodifier>，其中ButtonModifier = 'primary' | 'secondary' | 'danger'
CSS Modules 场景下，BEM Modifier 要先查 styles 对象再传给 classnames
在 Button.module.css 中，buttonBem.m('primary') 返回的是原始类名 button--primary，不是最终哈希后的类名。直接传给 classNames 会导致样式丢失——因为 DOM 上实际渲染的是类似 Button_button--primary__abc123 这样的名字。
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 正确做法是：用
styles[buttonBem.m('primary')]获取真实类名，再传入classNames - 错误写法：
classNames(styles.button, 'button--primary')—— 字符串'button--primary'不会命中styles对象，也不受 CSS Modules 作用域保护 - 推荐封装一层工具函数，比如
cn(buttonBem.m('primary'))，内部自动做styles[...]查找，避免每个组件都重复写
多个 Modifier 同时生效时，不要用对象 key 拼接字符串
常见错误是把多个 modifier 写成一个对象 key：{ ['button--primary button--large']: true }。这会让 classNames 把整个字符串当做一个类名处理，而 CSS Modules 的 styles 对象里根本不存在这个键，结果就是白屏级失效。
- 每个 modifier 都要单独调用
bem.m()，然后分别传入classNames：classNames(styles.button, buttonBem.m('primary'), buttonBem.m('large')) - 如果 modifier 之间有互斥逻辑（比如 size 和 variant 不能共存），用对象语法更安全：
{ [styles[buttonBem.m('primary')]]: variant === 'primary', [styles[buttonBem.m('large')]]: size === 'large' } - 注意：CSS Modules 不支持空格分隔的多类名字符串作为单个 key，它只认精确匹配的键名
postcss-bem-linter 能拦住 modifier 误用，但只在构建阶段起作用
它不会报错说 “你写了 button__label--disabled”，但它会拒绝这种写法——因为 BEM 规范里 Element（__label）下面不允许挂 Modifier（--disabled）。这类问题 runtime 完全无提示，只能靠构建时拦截。
- 启用后，它会报错：
.button__label--disabled（Element 下挂 Modifier）、.button-icon（缺双下划线）、.button .icon（带空格后代选择器） - 配合
eslint-plugin-css-modules可进一步限制 JSX 中只能使用当前模块声明过的 BEM 键名，比如styles.button__icon存在才允许用，styles.modal__close直接报 ESLint 错误 - 别跳过这步：没有 linter，团队协作中 modifier 的语义边界很快就会塌缩成一堆不可维护的手写字符串
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
