bem仅是命名约定，无法防止微前端样式污染；必须结合应用级上下文绑定（如动态注入子应用id为block名）、构建时css modules/scoped处理及运行时css变量前缀控制，才能实现真正隔离。
单靠 BEM 规范无法防止微前端样式污染，它只是命名约定，不是隔离机制。必须配合应用级上下文绑定、构建时处理和运行时注入才能真正生效。
为什么 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规则
必须把 block 名动态绑定到子应用 ID
block 名不能写死，否则部署路径或注册名一变，样式就脱钩。要从微前端运行时环境读取唯一标识，比如 qiankun 的 props.name 或全局变量 window.__MICRO_APP_NAME__。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 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 导入 + 强制 CSS Modules / scoped 回退
子应用里任何 import 'xxx.css' 或 <link rel="stylesheet"> 都是高危操作。UI 框架样式必须由主应用统一提供，子应用只负责 JS 行为。
- 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等泛化类名
自定义属性（CSS 变量）必须带 app-id 前缀
--color-primary 这种写法在微前端里等于公开广播，任意子应用都能修改它，且无法追溯源头。变量必须强制绑定上下文。
- 正确格式：
--mf-order-header-bg、--mf-user-text-color，其中mf是微前端前缀，order是子应用 ID - 禁止嵌套语义：
--mf-order-form-input--error-border是错的，层级应由 BEM 类名控制，变量只管语义值 - JS 动态设置必须走
document.documentElement.style.setProperty('--mf-order-header-bg', '#fff')，不能内联写style="--color-primary: red" - 建议接入 ESLint 插件（如
eslint-plugin-css-vars），拦截未加前缀的--*使用
最易被忽略的一点：BEM 的 block 名必须对应真实挂载容器的 DOM 节点边界。如果子应用挂载到 <div id="subapp-order">，那所有 BEM 类名的 block 就该是 <code>subapp-order，而不是业务语义的 order-mgmt——后者只适合类名内部，前者才是样式隔离的物理锚点。
