CSS变量本身不防污染，真正起修复作用的是作用域控制机制：必须用:root外的局部选择器（如.card）定义变量，并通过选择器边界限定生效范围，避免全局覆盖与命名冲突。
CSS 变量（--my-color）本身不解决污染，它只是被污染的“受害者”或“传导体”；真正起修复作用的是变量的作用域控制机制——必须用 :root 外的局部作用域定义变量，并配合选择器边界限制生效范围。
为什么直接在 :root 里定义 --color 会放大污染
全局 CSS 变量一旦写在 :root 或 html 下，就和 .button 类名一样，是全页面可读、可覆盖的。后加载的 CSS 只需一句 :root { --primary: red; }，所有依赖 var(--primary) 的组件都会变色——你根本不知道哪来的覆盖。
- 常见错误现象：
Button.vue里写background: var(--primary);，但点击登录页后整个系统按钮都变红了 - DevTools 里查
getComputedStyle(el).getPropertyValue('--primary')返回的是最新赋值，但来源栏只显示 “theme.css”，看不出谁改的 - 第三方 UI 库（如 Ant Design）也用
--primary，它和你自定义的变量名冲突，且无报错
把变量锁进组件作用域：用选择器前缀 + 局部 :root
变量没有天然作用域，但你可以用选择器把它“框住”。核心不是“定义变量”，而是“限定谁能看到它”。
- 禁止在顶层
:root定义业务变量；改为在组件容器类下定义，例如：.card { --card-bg: #f8f9fa; } - 确保使用点必须落在该选择器内：
.card__header { background: var(--card-bg); }—— 如果 DOM 没有.card父级，var(--card-bg)就是initial（不是继承失败，是根本没定义） - Vue / React 组件中，推荐绑定到根元素：
<div class="user-card">...</div>，然后写.user-card { --user-card-border: 1px solid #e0e0e0; } - 不要用嵌套规则“偷懒”：
.user-card { &__body { border: var(--user-card-border); } }是 OK 的，但.user-card__body { --user-card-border: ... }会导致变量仅对__body自身生效，子元素读不到
和 scoped / CSS Modules 配合时的关键细节
Vue 的 <style scoped></style> 或 CSS Modules 不会自动作用于 :root 或选择器外的变量声明——它们只处理选择器和属性，变量仍按原生 CSS 规则传播。
立即学习“前端免费学习笔记（深入）”；
- scoped 样式中写
.btn { --btn-padding: 12px; }→ 正确，变量随选择器作用域走 - scoped 样式中写
:root { --btn-padding: 12px; }→ 错误，:root是全局锚点，scoped 对它无效 - CSS Modules 中
.button { --button-color: blue; }→ 编译后变成.button_abc123 { --button-color: blue; }，变量仍只对该类生效，安全 - 但若你在
button.module.css里写:global(:root) { --button-color: blue; }→ 直接回归全局污染，等同于没用模块化
微前端或跨团队协作时：用命名空间前缀强制隔离
当多个子应用共存，或你无法控制第三方库是否定义同名变量时，光靠作用域不够，得加“名字身份证”。
- 约定统一前缀，比如
--myapp-primary、--myapp-spacing-xs，避免和--antd-primary冲突 - 用 PostCSS 插件（如
postcss-custom-properties）在构建时自动重写变量名，防止手误 - 禁止在公共基础包（如
@shared/theme）里导出裸变量；改用函数封装：export const getPrimaryColor = () => getComputedStyle(document.documentElement).getPropertyValue('--myapp-primary'); - 动态主题切换时，别直接改
document.documentElement.style.setProperty('--myapp-primary', '#ff6b6b')，而应切换整个 class：document.documentElement.classList.toggle('theme-dark')，再由.theme-dark { --myapp-primary: #4a5568; }控制
最易被忽略的一点：CSS 变量的继承性是“真继承”，不是“作用域查找”。哪怕你把 --card-bg 定义在 .card 上，它的子元素只要没被其他规则覆盖，就会一直继承下去——所以别指望“定义在深层元素上就能自然收口”，必须靠选择器显式切断或重定义。
