BEM仅是命名约定，无法提供运行时隔离，子应用CSS仍注入全局head，类名撞车即发生层叠覆盖；必须配合子应用唯一前缀（如subapp-a__header__logo）和CSS Modules哈希化才能真正隔离。
为什么子应用只用 BEM 还不够隔离？
BEM 本身不提供运行时隔离能力，它只是命名约定。在微前端里，子应用的 CSS 仍会注入 <head>，一旦类名撞车（比如两个子应用都用了 button--primary），后加载的就会覆盖前一个——BEM 类名再规范也拦不住浏览器按层叠顺序执行。qiankun 的 dynamic stylesheet 沙箱默认只做“加载时注入、卸载时移除”，但不改写选择器；如果两个子应用同时运行（多实例场景），或主应用也定义了 .search-form__input，冲突照旧发生。
子应用内 BEM 必须配合块级作用域前缀
不能直接用 button 或 modal 当 block 名，必须带业务/子应用标识，否则跨子应用仍可能重名。比如主应用和子应用 A 都写了 header__logo，就白忙一场。
- ✅ 推荐：
subapp-a__header__logo、subapp-b__card__title（block 名含子应用唯一标识） - ❌ 危险：
header__logo、card__title（无上下文锚点，等于裸名） - ⚠️ 注意：前缀不是越长越好，要可维护。可用构建时变量注入，如 Webpack 的
DefinePlugin注入process.env.SUBAPP_ID，再在 SCSS 中拼接：@bem subapp-#{SUBAPP_ID} - 避免用
myproject-button这类全局前缀——它无法区分子应用边界，且破坏 BEM 的 block 语义（myproject不是一个功能单元）
怎么防止子应用 BEM 类名被主应用或第三方库穿透？
即使子应用 class 名唯一，主应用的全局样式（如 * { box-sizing: border-box }）或第三方组件（如 Ant Design 的 .ant-btn）仍可能污染子应用 DOM。BEM 管不了别人的选择器，只能管住自己的入口和边界。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 子应用所有样式必须通过 BEM 类名触发，禁用后代选择器：
.subapp-a__form .subapp-a__input是反模式，应写成subapp-a__form__input - 包裹第三方组件时，用 BEM wrapper 限定作用域：
<div class="subapp-a__date-picker"><el-date-picker></div>，再写.subapp-a__date-picker .el-input__inner - 禁止在子应用中直接覆盖第三方类名（如
.ant-btn { color: red }），必须加 wrapper 限定：.subapp-a__date-picker .ant-btn - 慎用
:global()或:deep()—— 它们会逃逸出 scoped 边界，若必须用，务必限制在 wrapper 内部，且不泛化到body或html
BEM + CSS Modules 是目前最稳的组合方案
纯 BEM 依赖人工守规矩，而 CSS Modules 在构建期把 subapp-a__button--primary 编译成类似 subapp-a__button--primary_abcd1234 的唯一哈希名，物理上杜绝冲突。它不破坏 BEM 结构，反而加固语义边界。
立即学习“前端免费学习笔记（深入）”；
- Vue 中用
<style module>，React 中配css-loader?modules，class 名自动加 hash 后缀 - JS 中必须用生成后的类名：
import styles from './Button.module.css'; <button className={styles['button--primary']} /> - 注意：不要混用
className="button button--primary"和styles.button，后者才是模块化后的安全名 - 对动态插入的 DOM（如富文本、服务端渲染 HTML），BEM 命名仍需保留，但可通过属性选择器兜底：
.subapp-a__content [class^="hljs-"]
最容易被忽略的是：BEM 的隔离效果完全取决于你是否守住「所有样式入口必须经过 block 前缀」这条线。哪怕只在一个地方写了 .subapp-a__card .title，整套隔离逻辑就失效了——不是规则没用，是漏了一个洞。
