微前端BEM类名冲突源于构建产物混入全局CSS后浏览器按权重覆盖，必须通过构建层隔离而非人工命名；正确方案是构建期自动加项目前缀、禁用SCSS空格嵌套、JS层用原始BEM名配合CSS Modules或BEM工厂函数，辅以data-scope运行时兜底。
微前端之间 BEM 类名冲突不是命名写错了，而是构建产物混入同一份 CSS 环境后，浏览器按层叠顺序和选择器权重“认类名不认来源”导致的物理覆盖——必须靠构建层隔离，不能靠人写对名字。
为什么 .search-form__input 会在子应用间互相覆盖
BEM 本身不生成唯一类名，它只是约定。两个子应用都输出 .search-form__input，最终打进主应用的全局 CSS 里，后加载的规则直接覆盖前一个。DevTools 里看到样式被划掉，但来源可能是另一个团队的打包产物，根本没报错。
- 微前端常见场景：主应用用 Webpack + css-loader 引入多个子应用的
style.css，所有类名平铺在全局作用域 - 哪怕子应用各自用了
postcss-bem-linter校验，也拦不住最终产物撞车 -
!important或提高 specificity（如加div.search-form__input）只会让问题更难定位，破坏 modifier 覆盖链
构建期自动加项目前缀，且只作用于自有 block
手动写 myapp-search-form__input 是反模式：违反 BEM 原则、JS 层拼接易出错、无法复用社区命名习惯。真正安全的做法是构建阶段注入前缀，且严格排除第三方类名。
- Webpack 用户：启用
css-loader的modules: { auto: true }，再配postcss-prefix-selector插件，规则设为prefix: '.myapp-' - PostCSS 单独运行时：用
exclude正则过滤第三方，例如/^\.ant-/、/^\.el-/，避免误伤 Ant Design 或 Element Plus 的类 - SCSS 中禁用空格嵌套：
.search-form { .input { } }会产出.search-form .input，权重失控且破坏扁平结构；必须用&__input
JS 层永远用原始 BEM 名，别碰前缀字符串
构建工具加了前缀，JS 里硬拼 'myapp-' + BLOCK + '__' + element 会放大错误风险：大小写、连字符漏写、空格缺失，在 CI 环境下极易挂掉。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：搭配 CSS Modules 使用
clsx，例如clsx(styles['search-form'], styles['search-form--loading']) - 若不用 Modules，封装 BEM 工厂函数：
const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`，调用cn('input', 'disabled')得到search-form__input--disabled - 禁止在 JSX/Vue 模板里手写带前缀的类名，比如
className="myapp-search-form__input"——这会让 JS 和 CSS 两套命名体系脱节
外层命名空间兜底：当构建不可控时
有些老系统或遗留微前端无法改构建配置，只能靠运行时隔离。此时用 data-scope 属性包裹子应用根节点，所有样式规则前置该属性，比堆 DOM 层级更可靠。
- 主应用渲染子应用时，加唯一属性：
<div data-scope="sales-dashboard"><salesapp></salesapp></div> - 子应用 CSS 改写为：
[data-scope="sales-dashboard"] .search-form__input { ... } - 注意避开第三方组件的动态类名陷阱：某些库用
[class*="ant-btn"]匹配，data-scope对这类选择器无效，需额外包一层 wrapper block
最容易被忽略的不是前缀加没加，而是每个子应用是否真有独立的构建产物入口和 CSS 输出边界——如果几个子应用共用同一个 build/style.css，再严格的 BEM 规范也挡不住类名在物理层面合并后互相覆盖。
