--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()动态注入。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 前缀必须来自运行时注册信息，比如 qiankun 的
name字段，或通过window.__MICRO_APP_NAME__注入——写死在代码里会导致部署路径一变就失效 - 构建时建议接入 ESLint 插件校验，拦截漏加前缀的
--*使用，否则漏一个就可能引发跨应用样式漂移
如何防止子应用误用未加前缀的 CSS 变量
光靠约定不行，得从工具链堵住入口。Vite 或 Webpack 构建配置中可加入 PostCSS 插件，在编译阶段扫描所有:root声明和var(--*)调用，对未带app-id前缀的变量报错或自动补全。
- 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(--*)意外继承到外部
app-id字符串——它一旦不一致，隔离就形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
