--color-primary在微前端中是高危写法，因其无选择器权重、就近生效且静默污染全局；必须使用--{app-id}-{semantic-name}前缀格式，禁止嵌套语义与JS内联设置，需通过运行时注册的app-id动态注入，并配合构建时PostCSS校验与容器作用域隔离。

为什么--color-primary在微前端里是高危写法

自定义属性（CSS Custom Properties）不走选择器权重，只靠继承链和就近生效。子应用在body上写style="--color-primary: red"，主应用所有用到--color-primary的组件瞬间变色，DevTools 里只显示最终值，根本看不出谁改的。它不像类名冲突有覆盖痕迹，而是静默污染。

必须加app-id前缀，且格式要严格

正确格式是--{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()动态注入。

• 前缀必须来自运行时注册信息，比如 qiankun 的name字段，或通过window.__MICRO_APP_NAME__注入——写死在代码里会导致部署路径一变就失效
• 构建时建议接入 ESLint 插件校验，拦截漏加前缀的--*使用，否则漏一个就可能引发跨应用样式漂移

如何防止子应用误用未加前缀的 CSS 变量

光靠约定不行，得从工具链堵住入口。Vite 或 Webpack 构建配置中可加入 PostCSS 插件，在编译阶段扫描所有:root声明和var(--*)调用，对未带app-id前缀的变量报错或自动补全。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• PostCSS 配置需排除@layer、@import等非根作用域场景，只处理顶层:root和直接var()
• 注意：该检查无法覆盖 JS 动态setProperty调用，所以仍需配合运行时注入规范
• 主应用可提供一个css-var-injector工具函数，强制要求传入app-id参数，避免手写setProperty时遗漏

多个子应用共用同一份主题变量时怎么隔离

不能让所有子应用都往:root写同一套变量，否则后加载的会覆盖前一个。正确做法是每个子应用只注入自己命名空间下的变量，并在使用处显式限定作用域：

立即学习“前端免费学习笔记（深入）”；

• 把变量挂到子应用专属容器元素上，比如<div id="subapp-order">...</div>，然后写#subapp-order { --mf-order-header-bg: #fff; }
• 主应用不提供全局:root变量，只提供基础 token 常量（如--base-spacing-xs），子应用按需映射为带前缀的变量
• 若用 CSS-in-JS（如 Emotion），确保css函数生成的样式块也绑定容器 ID，避免var(--*)意外继承到外部

真正难的不是加前缀，而是让所有团队在 JS 动态设置、PostCSS 处理、SCSS 变量引用、甚至设计系统文档里，始终对齐同一个app-id字符串——它一旦不一致，隔离就形同虚设。