单纯写 order-mgmt__submit-btn 无法杜绝微前端样式冲突；必须动态绑定 block 名到子应用 ID、禁用全局 CSS 导入、CSS 变量加 app-id 前缀，三者缺一不可。
单纯写 order-mgmt__submit-btn 这类 BEM 类名，**完全无法杜绝微前端样式冲突**。BEM 只防命名重复，不防作用域泄漏；真正起效的，是把 block 名动态绑定到子应用 ID、禁用全局 CSS 导入、CSS 变量加 app-id 前缀这三件事同时做对。
block 名必须运行时读取子应用 ID，不能写死
BEM 的 block 名（如 order-mgmt）如果硬编码在 SCSS 变量或组件模板里，构建后就固化了。一旦子应用注册名从 order-mgmt 改成 oms，或部署路径变化，样式就和实际运行环境脱钩。
- Vue 项目：在
setup()中读取window.__MICRO_APP_NAME__或props.name，生成 class：${appName}__form-submit - React 项目：封装
useAppName()Hook，避免组件内直接写死字符串 - 验证方式：打开 DevTools，检查 DOM 元素上的类名是否真实包含当前子应用名，比如
user-center__avatar，而不是泛化的form__avatar
子应用禁止 import 任何全局 CSS 文件
只要子应用写了 import 'element-plus/theme-chalk/index.css' 或 ，就会向 document.head 注入裸露的 .el-button 规则——这些规则天然参与主文档层叠，后加载的子应用必然覆盖先加载的。
- UI 框架样式必须由主应用统一提供，子应用只负责 JS 行为
- Element Plus 必须配置
namespace: 'ep'，确保产物中类名为.ep-button而非.el-button - Vite 子应用需启用
css.modules，且generateScopedName包含 app ID，例如：[name]__[local]___[hash:base64:5] - 构建后检查
dist目录下的 CSS 文件，确认无.btn、.header等泛化类名
CSS 变量也得加 app-id 前缀，不能只靠类名
哪怕类名全按 BEM 写对了，--color-primary 这种未加前缀的 CSS 变量仍会在全局生效。两个子应用都设置 --color-primary: red，后设置的会覆盖前一个，且无法通过选择器限定作用域。
- 所有自定义 CSS 变量必须带唯一前缀，例如：
--mf-order-header-bg、--mf-user-avatar-radius - 主应用可提供基础变量（如
--mf-color-brand），子应用仅覆写自身前缀下的变量 - 禁止在子应用中使用
:root { --color-primary: ... }这类全局注入
最容易被忽略的一点：BEM 类名本身必须静态可预测。不要用 useId()、随机字符串或服务端动态生成的 hash 去拼接 block 名——否则 SSR 和客户端 hydration 会因类名不一致而报 mismatch 错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
