bem类名在大型项目中仍会冲突，因其本质是全局css，同名类（如button__text）在多库/微前端场景下仍会覆盖；css modules通过哈希化（如button_button__text__abc123）实现真正隔离，需正确配置css-loader的modules: { mode: 'local' }并避免硬编码类名。
为什么 BEM 类名在大型项目里还会冲突
即便严格遵守 bem__element--modifier 命名规范，BEM 本质仍是全局 CSS 类名。当多个组件库、微前端子应用或异步加载的模块都输出同名类（比如 button__text），样式仍会互相覆盖——尤其在 SSR 或构建时未做 scope 隔离的场景下。
根本问题不在命名是否“够 BEM”，而在于 CSS 本身没有模块边界。CSS Modules 才是真正切断全局污染的手段，它把类名编译成唯一哈希，让 button__text 变成类似 Button_button__text__abc123 这样的本地标识。
如何在 Webpack 中启用 CSS Modules 并保留 BEM 语义
关键不是抛弃 BEM，而是让 BEM 类名只作为开发时的可读标识，由 CSS Modules 负责运行时隔离。配置要点如下：
- Webpack 的
css-loader必须开启modules: { mode: 'local' }，不能只写modules: true（后者默认为'global'，无效） - 推荐搭配
localIdentName：例如[name]_[local]_[hash:base64:5]，既保留组件名和原始 BEM 类名，又确保唯一性 - 若使用 Sass，需确认
sass-loader在css-loader之前，否则@import的变量/混合宏无法被识别 - 注意：CSS Modules 默认不处理
:global(.xxx)外的嵌套选择器，BEM 中的.block__element:hover会被正常转换，无需额外声明
React 中怎么用 CSS Modules 写 BEM 组件
不再靠字符串拼接类名，而是从模块中解构出已哈希化的类名变量。这样既保持 BEM 结构清晰，又杜绝手误拼错或重复定义：
import styles from './Button.module.scss';
function Button({ children, disabled }) {
return (
<button classname="{styles.button}" disabled>
<span classname="{styles.button__text}">{children}</span>
<span classname="{styles.button__icon}"></span>
</button>
);
}
注意：styles.button__text 是编译后的真实类名，不是字符串 "button__text"；如果在 JS 中硬编码 className="button__text"，就完全绕过了 CSS Modules，等于白配。
哪些情况会让 CSS Modules 失效，导致 BEM 再次泄漏
最容易被忽略的是「非标准引入路径」和「动态类名拼接」：
- 用
import './Button.scss'（无命名导入）→ 样式会以全局方式注入，BEM 类名直接暴露 - 在 JS 中用模板字符串拼类名：
className={`button ${isPrimary ? 'button--primary' : ''}`→button--primary不受 CSS Modules 管控 - 第三方 UI 库（如 Ant Design）未开启 CSS-in-JS 或未用其提供的
cssVariables模式 → 它们的 BEM 类名仍在全局生效 - 服务端渲染时，若未对每个请求生成独立的 CSS Modules 映射表（如未用
webpack-isomorphic-tools或next-css替代方案），可能复用缓存导致哈希冲突
真隔离不是加个 loader 就完事，得盯住每一处类名来源——只要有一个地方逃出 CSS Modules 的作用域，BEM 就会重新变成一把双刃剑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
