BEM命名本身不解决微前端跨应用样式冲突，必须为block名绑定应用上下文（如order-mgmt__submit-btn），禁用子应用全局CSS导入，并对CSS变量强制添加app-id前缀（如--mf-order-header-bg），同时通过构建工具启用CSS Modules兜底。
直接用 BEM 命名，但 block 名必须带应用标识
泛化类名如 .button 或 .header 在微前端里等于主动开火——只要两个子应用都写了，后加载的就会覆盖前一个。BEM 本身不解决跨应用冲突，关键在 block 名必须绑定应用上下文。比如主应用叫 admin-core，子应用叫 order-mgmt，那它的按钮类名就得是 order-mgmt__submit-btn，而不是笼统的 form__submit-btn。
常见错误是把应用名写死在代码里，结果部署路径一变就失效；正确做法是从微前端注册配置中动态读取，比如 qiankun 的 name 字段，或通过全局变量 window.__MICRO_APP_NAME__ 注入。
禁用子应用全局样式导入，尤其 UI 框架 CSS
子应用里写 import 'element-plus/dist/index.css' 或 <link href="/css/ant-design.css"> 是高危操作：qiankun 不会去重，多个子应用引入同一份 CSS，最终 DOM 里出现多份 <style> 标签，加载顺序决定谁赢，结果不可控。
实际应做到：
• 所有 UI 框架样式由主应用统一提供（如预加载 ElementUI + ElementPlus 命名空间版）
• 子应用只 import 组件 JS，不 import 任何 CSS 文件
• 若必须局部引入，改用 CSS Modules 或 scoped（Vue）封装，确保样式不出界
• 检查构建产物，确认 index.html 中无 <link rel="stylesheet"> 指向全局路径
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 规则），拦截漏加前缀的 --* 使用
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
构建工具层面启用 CSS Modules 或 postcss-modules
靠人工约定防不住多人协作和历史代码，得让构建工具兜底。css-loader 开启 modules: true 后，.btn 会被编译成类似 _btn_abc123 的唯一哈希名，不同子应用即使都写 .btn，也不会冲突。
关键配置点：
• Webpack：在 css-loader 配置中设 modules: { localIdentName: '[name]__[local]___[hash:base64:5]' }
• Vite：启用 css.modules 并指定 generateScopedName
• 注意：第三方组件库的 class（如 .ant-btn）不能被 Modules 处理，需用 wrapper 包裹后局部覆盖，例如 .order-app :deep(.ant-btn)
• 全局样式（如 reset.css）仍需手动用 :global{} 或 /* global */ 注释包裹
立即学习“前端免费学习笔记（深入）”；
真实场景里最常被忽略的，是 CSS 变量前缀和 UI 框架命名空间这两层——它们不像类名冲突那样一眼可见，出问题时往往表现为“某天突然某个按钮变色”“输入框边框消失”，排查成本极高。动手前先确认子应用是否真的没偷偷 import 全局 CSS，再检查所有 --* 是否带 app-id，比事后 debug 快十倍。
