css自定义属性默认全局共享，微前端中不加前缀会导致子应用间变量覆盖；必须使用唯一app-id前缀（如--mf-app1-color-primary），配合构建时校验与js动态注入，否则样式将不可控。
CSS自定义属性（--*）在微前端中默认不隔离，直接用--color-primary会炸锅。它和普通类名一样属于全局作用域，子应用之间互相覆盖毫无预警——A 应用设了--color-primary: #3498db，B 应用随后设--color-primary: #e74c3c，所有用到该变量的地方瞬间变色，连 :root 都拦不住。
为什么--*比类名更危险
类名冲突至少还能靠选择器权重或加载顺序“抢赢”，而自定义属性是链式继承+就近生效：父元素设的--x会被所有后代读取，且子应用若在:root或高阶容器上覆盖，下游所有组件无条件服从。更糟的是，浏览器 DevTools 里看不出谁改的——只显示最终值。
- 微前端常见错误现象：
Button组件在子应用 A 里是蓝色，嵌入主应用后变成红色，查半天发现是子应用 B 在body上写了style="--color-primary: red" - 即使用了 CSS Modules 或 Shadow DOM，只要没封装
--*，变量照样穿透 - PostCSS 插件如
postcss-custom-properties默认不处理跨应用隔离，仅做静态替换
必须加前缀，且前缀要带应用标识
不能只写--primary-color，得绑定到具体应用上下文。推荐格式：--{app-id}-{semantic-name}，比如--mf-app1-button-bg、--mf-cart-header-font-size。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
app-id必须唯一且稳定，建议从微前端注册配置中提取（如 qiankun 的name字段），避免手写拼错 - 禁止用开发环境名（如
--dev-button-bg），上线后失效 - 不要嵌套太深：
--mf-app1-form-input--error-border是错的，--后只允许一个语义层级，多余部分用 BEM 类名控制 - Vue / React 组件内动态设置时，统一走 JS 注入：
document.documentElement.style.setProperty('--mf-app1-button-bg', '#3498db')，别直接写内联 style
配合构建时校验，防漏防误
光靠人工约定撑不住多人协作。需在 CI 阶段加检查：
- 用
stylelint+stylelint-config-standard配合自定义规则，拦截未带前缀的--*声明（正则匹配/^--(?!mf-)/） - Webpack/Vite 构建时用
string-replace-webpack-plugin批量注入前缀（适用于 legacy 项目无法重写 CSS 变量调用处） - 如果用 JSS，启用
jss-plugin-isolate并配置isolate: true，它会对每个样式表自动包裹作用域，但注意：它不处理:root级变量，仍需人工前缀
Shadow DOM 是唯一真正安全的方案，但代价明确
只有把--*写进 Shadow Root 的 :host 或 :root，才能彻底隔绝外部干扰。但要注意：
- Shadow DOM 内的
:root不等于文档:root，变量不会继承，必须显式定义或传入 - 主题切换需要额外桥接逻辑——主应用无法直接修改子应用 Shadow DOM 内的变量
- SEO 和 SSR 场景下，服务端渲染出的变量值可能与客户端不一致，需同步 hydration
- 第三方 UI 库（如 Ant Design）若未适配 Shadow DOM，其内部
--*会失效或报错
最易被忽略的一点：CSS 自定义属性的“作用域”是伪概念，它没有模块化机制。哪怕你用 Webpack 的 CSS 模块打包，--x 依然全局可见。前缀不是风格选择，是生存必需；校验不是锦上添花，是防止上线后半夜被报警电话叫醒的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
