BEM不是万能解药但仍是CSS命名起点，因其需配合目录结构、构建检查与Code Review才能生效，否则易出现命名失控；在React+CSS Modules中须用ESLint校验、封装Block类名、禁用字符串拼接；第三方样式应通过wrapper隔离，全局工具类加命名空间；媒体查询须收口至统一断点文件，不得散落于Block内。
为什么 BEM 不是万能解药，但仍是 CSS 命名的起点
BEM（Block-Element-Modifier）能显著降低样式冲突和维护成本，但它本身不解决作用域、复用粒度或组件边界模糊的问题。很多人照搬 bem-cn 或手写 .header__logo--large 就以为规范落地了，结果三个月后出现 .header__logo--large--dark 这种嵌套修饰符，说明命名逻辑已失控。
真正起作用的是「约束力」：BEM 必须配合目录结构、构建工具检查、Code Review 卡点才能生效。比如禁止在 _button.scss 里写 .modal__close，这种跨 Block 的引用必须被 lint 拦住。
- 所有 Block 文件必须独立存放，路径为
src/components/Button/Button.module.scss，不允许合并到全局common.scss - Element 名称只能是名词（
__icon、__text），禁用动词（__show、__toggle）——后者本质是状态，该交给 JS 控制类名切换 - Modifier 值必须原子化且可枚举，
--size-small合法，--size-14px违规；禁止用 Modifier 表达响应式断点（--mobile是错的，应由媒体查询包裹）
如何让 BEM 在 React + CSS Modules 中不翻车
CSS Modules 默认启用局部作用域，但 BEM 的语义层级容易被开发者忽略，导致 import styles from './Button.module.scss' 后乱用 styles.icon 而不是 styles.button__icon，破坏 Block 边界。
关键不是“能不能用”，而是“怎么让团队不绕过它”。推荐两个硬性手段：
立即学习“前端免费学习笔记（深入）”；
- ESLint 插件
eslint-plugin-css-modules配合自定义规则，校验className字符串是否匹配当前文件声明的 BEM 模式（如Button.module.scss只允许出现button开头的 class） - 组件内只暴露 Block 类名，Element/Modifier 通过组合方式注入：
<Button icon="left">渲染出button button--icon-left button__icon，而非让调用方拼接className={styles['button__icon']} - 禁止在 JSX 中使用字符串拼接 class：
className={`button ${props.active ? 'button--active' : ''}`}是反模式，必须改用clsx或classnames库统一处理
遇到 legacy CSS 或第三方库时怎么保持 BEM 一致性
老项目里总有 .clearfix、.hidden 这类全局工具类，还有 Ant Design、Element Plus 的默认样式。直接覆盖或重写会增加维护负担，也违背 BEM 的“单一职责”原则。
正确做法是划清「控制权」：BEM 只负责业务组件结构样式，工具类归 tools.scss 管理，第三方样式通过 wrapper Block 隔离。
- 给第三方组件包一层 Block 容器：
<div className="ui-card-wrapper"><Card /></div>，所有定制样式写在.ui-card-wrapper下，不侵入.ant-card - 全局工具类必须加命名空间前缀，如
u-hidden、u-mt-8，避免与业务 Block 名冲突（.hidden和.header__hidden易混淆） - Legacy 样式迁移优先级：先抽离出可复用 Block（如
.old-table→.data-table），再逐步替换 HTML 结构，而不是一上来就重写 CSS
为什么 BEM 文件里不能写 @media 和 @supports
很多人觉得“响应式就得在组件文件里写媒体查询”，结果 Button.module.scss 里塞了 5 个 @media (min-width: 768px)，既难定位又无法集中调控断点值。
BEM 的 Block 是视觉单元，不是响应式单元。断点属于布局层契约，应由上层容器（Layout / Grid）决定，Block 只响应传入的尺寸 props 或 class。
- 所有断点定义收口到
src/styles/breakpoints.scss，用变量（$bp-tablet）而非魔法数字 - Block 内部只写基于 props 的条件样式，如
&.button--size-large { padding: $spacing-xl; }，尺寸含义由 JS 控制 - 需要响应式行为的场景（如移动端隐藏某 Element），用 JS 添加 modifier：
className={\`button__icon \${isMobile ? 'button__icon--hidden' : ''}\`}
最常被忽略的是：BEM 规范的生命力不在命名多漂亮，而在能否被工具链自动校验、被新人一眼看懂边界、被重构时快速定位影响范围。一旦发现某个 Block 的样式散落在三个文件里、modifier 出现在五个不同组件中，那规范就已经失效了。
