BEM命名无法解决样式覆盖问题，因其仅防类名冲突而不提供作用域隔离；根本原因是CSS全局性，需结合运行时应用ID动态生成类名、禁用全局CSS导入、严格约束第三方样式三者协同。
为什么BEM类名写得再规范也会被覆盖
BEM 只解决「类名不撞车」的问题，不解决「样式作用域」问题。浏览器对所有 .order-mgmt__submit-btn 和 .user-center__submit-btn 一视同仁，只要它们都在全局 CSS 中定义，后加载的子应用样式就会覆盖先加载的——qiankun 的 JS 沙箱完全不管 CSS。
常见错误现象：.button 在两个子应用里都存在，DevTools 显示最终生效的是第二个子应用的规则，第一个完全被划掉。
根本原因：CSS 是文档级全局资源，document.head 里插入的 <style></style> 标签天然参与主文档层叠计算。即使用了 order-mgmt__submit-btn，若子应用直接 import 'element-plus/theme-chalk/index.css'，仍会引入大量裸露的 .el-button 规则。
真正起作用的不是BEM命名，而是上下文绑定
BEM 本身只是命名约定，防止覆盖的关键在于把 block 名动态绑定到子应用 ID：
- block 名不能写死，否则部署路径或注册名一变，样式就脱钩
- 要从微前端运行时环境读取唯一标识，比如
qiankun的props.name或全局变量window.__MICRO_APP_NAME__ - Vue 项目可在
setup()中读取：const appName = window.__MICRO_APP_NAME__ || 'unknown'，然后生成 class：${appName}__form-submit - React 项目建议封装
useAppName()Hook，避免组件内硬编码 - 禁止在 SCSS 变量里写死：
$block: 'order-mgmt'—— 构建时无法感知运行时 app name
验证方式：打开 DevTools，在 HTML 元素上检查类名是否真实包含当前子应用名，而不是 form__submit 这类泛化写法。
构建时和运行时必须双管齐下
单靠命名或单靠工具都不够，必须三者协同：
- 禁用全局 CSS 导入：
import 'xxx.css'或<link rel="stylesheet">都是高危操作；UI 框架样式必须由主应用统一提供 - Element Plus 必须配置
namespace: 'ep'，确保类名变成.ep-button而非原始.el-button - Vite 子应用需在
vite.config.ts中启用css.modules，且generateScopedName包含 app ID：[name]__[local]___[hash:base64:5] - Vue 单文件组件必须加
<style scoped></style>，React 推荐clsx+ CSS Modules，避免className={styles.button}外泄 - 构建后检查
dist目录下的 CSS 文件，确认无裸露的.btn、.header等泛化类名
最容易被忽略的隔离失效点
第三方库、服务端渲染、JS 动态插入节点，这些地方一旦漏掉 wrapper 或属性选择器约束，整个 BEM 隔离就形同虚设：
- Ant Design 的
.ant-btn不能靠改名隔离，而要用<div class="user-profile__date-field"><datepicker></datepicker></div>包裹，并写.user-profile__date-field .ant-picker-input input - 属性选择器必须限定范围：
.user-profile [class^="ant-"]✔️，[class^="ant-"]❌ - Webpack CSS Modules 下需加注释：
/* webpackMode: "global" */，否则规则被模块化隔离失效 - Vue
<style scoped></style>中要用:deep(.ant-btn)，不能直接写.ant-btn - JS 动态添加类时，必须走完整 BEM 路径：
el.classList.add('user-profile__tooltip--visible')
最复杂的地方不在怎么写，而在哪一处没写——比如某个 .search-form .input 还存在，整个沙箱就失效了。第三方样式不会主动守规矩，你得靠 wrapper + 属性选择器 + JS 约束三道防线把它框死在指定范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
