直接在:root定义CSS变量会加剧微前端样式污染，因其全局可读可覆盖，后加载子应用一句:root{--primary-color:#ff4757}即可改变所有依赖该变量的样式，且DevTools无法定位覆盖源。
为什么直接在 :root 定义 CSS 变量会加剧污染
微前端里最隐蔽的样式污染源不是类名，而是--primary-color这类变量。它们不像.btn能被前缀或模块化处理，一旦写在:root或html下，就和全局类名一样——后加载的子应用只需一句:root { --primary-color: #ff4757; }，所有依赖该变量的按钮、标题、边框全变色，且 DevTools 里查不到是谁改的。
常见错误现象包括：
- 子应用切换后主题色突变，但控制台无报错
-
getComputedStyle(el).getPropertyValue('--primary-color')返回值正确，但“来源”只显示theme.css，无法定位覆盖点 - Element Plus 和 Ant Design 同时使用
--primary，变量值互相覆盖，无任何冲突提示
把变量锁进组件容器，而非挂在 :root
CSS 变量本身没有作用域，但你可以用选择器把它“框住”。关键不是定义变量，而是限定谁能看到它。
- 禁止在
:root或html下定义业务变量；改为在组件根容器类中定义，例如：.order-list { --order-item-height: 48px; } - 确保使用点必须落在该选择器内：
.order-list__item { height: var(--order-item-height); }——如果 DOM 缺少.order-list父级，var(--order-item-height)会回退为initial（不是继承失败，是根本未定义） - Vue/React 中推荐绑定到根元素：
<div class="user-card"></div>，再写.user-card { --user-card-border: 1px solid #e0e0e0; } - 避免在嵌套规则中重复声明：
.user-card__body { --user-card-border: ...; }会导致变量仅对该元素自身生效，子元素读不到
和 scoped / CSS Modules 配合时的关键陷阱
<style scoped>或 CSS Modules 不会自动作用于:root或选择器外的变量声明——它们只处理选择器和属性，变量仍按原生 CSS 规则传播。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue SFC 中写
<style scoped>.card { --card-bg: #f8f9fa; }</style>是安全的，但若把--card-bg抽到单独的variables.css并@import进来，它就会逃逸成全局变量 - CSS Modules 对变量完全不处理：
button.module.css里的.button { --bg: blue; }会被哈希化为.button__abc123，但--bg仍全局可读 - 若用 Sass/LESS，必须确保
@use或@import路径不引入顶层:root变量块；所有变量应封装在 mixin 或局部作用域中
UI 组件库的 CSS 变量必须同步加命名空间
Element Plus、Arco Design 等库默认用--el-color-primary、--arco-color-primary等变量，但这些变量仍是全局注册的。两个子应用同时加载，后者的变量值会覆盖前者。
- Element Plus：通过 SCSS 变量重写
$namespace后，必须同步覆盖变量前缀，例如在element-namespace.scss中添加$css-vars-prefix: 'ep'; - Arco Design：使用
@arco-vars-prefix: 'finance-arco-vars';（非@prefix），否则类名加了前缀，变量仍裸奔 - 构建后务必检查 DevTools 的
Computed面板，确认var(--ep-color-primary)被实际使用，且:root下不再存在--el-color-primary - 第三方库若不支持变量前缀配置（如某些 Bootstrap 主题包），只能放弃变量方案，改用硬编码颜色值或 CSS-in-JS 动态注入
真正起作用的从来不是变量本身，而是你是否切断了它的传播路径。只要变量还挂在:root上，哪怕类名全哈希化、Shadow DOM 全启用，污染依然会发生——因为浏览器对变量的查找不走选择器匹配，只看作用域链。
