bem类名规范无法解决样式覆盖问题，因其只防命名冲突不提供作用域隔离；必须动态绑定block名到子应用id、禁用全局css导入、css变量加app-id前缀，三者缺一不可。
为什么 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，不能写死；否则部署路径或注册名一变，样式就脱钩
如何让 BEM 的 block 名真正绑定运行时子应用 ID
block 名不能写死在 SCSS 变量或组件模板里，构建时无法感知运行时 app name。要从微前端运行时环境读取唯一标识，比如 qiankun 的 props.name 或全局变量 window.__MICRO_APP_NAME__。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Vue 项目可在
setup()中读取：const appName = window.__MICRO_APP_NAME__ || 'unknown'，然后生成 class：${appName}__form-submit - React 项目建议封装
useAppName()Hook，避免组件内硬编码 - 禁用
$block: 'order-mgmt'这类 SCSS 变量写法——它在构建时固化，无法响应不同部署环境 - 验证方式：打开 DevTools，在 HTML 元素上检查类名是否真实包含当前子应用名，而不是
form__submit这类泛化写法
为什么禁用子应用全局 CSS 导入是硬性前提
子应用里任何 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 这种写法在微前端里是定时炸弹：它不走选择器权重，而是链式继承+就近生效。子应用在 body 上设 style="--color-primary: red"，主应用所有用到该变量的组件瞬间变色，DevTools 里只显示最终值，根本看不出源头。
- 必须强制使用格式
--{app-id}-{semantic-name}，例如：--mf-order-header-bg、--mf-user-profile-text-color - 禁止嵌套语义：
--mf-order-form-input--error-border是错的，多余层级应由 BEM 类名控制 - 禁止 JS 内联写
style="--color-primary"，统一走document.documentElement.style.setProperty()动态注入 - 建议配合构建时校验插件（如自定义 ESLint 规则），拦截漏加前缀的
--*使用
__ 和 -- 是工具链识别锚点，不是装饰；而真正的隔离靠的是运行时上下文注入 + 构建时模块化 + CSS 变量前缀三者缺一不可。最容易被忽略的是：**block 名动态绑定和 CSS 变量前缀这两步，一旦漏掉任意一个，其他所有 BEM 规范都形同虚设**。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
