直接在 :root 定义变量会导致组件样式“悄无声息地变”，因其为全局唯一作用域，所有 var(--x) 均向上继承至 :root；改一个 --primary-color 会隐式影响所有未加前缀或未设局部作用域的组件，且第三方库或同事同名变量后加载即覆盖，DevTools 难以追溯。
为什么直接在 :root 定义变量会导致组件样式“悄无声息地变”
因为 :root 是全局唯一作用域，所有 var(--x) 都会顺着继承链向上查到它。你改一个 --primary-color，所有没加前缀、没设局部作用域的组件都会跟着变——这不是复用，是隐式耦合。更危险的是：第三方库或同事写的 CSS 也定义同名变量，后加载的会覆盖先加载的，DevTools 里根本看不出是谁动的手。
用组件选择器 + 命名前缀声明局部变量才真正隔离
把变量写进组件根选择器里，而不是 :root，才能让变量只对当前 DOM 子树生效：
.user-profile { --user-profile-bg: #fff; --user-profile-text: #222; }- 子元素直接写
color: var(--user-profile-text)，不会误读其他组件的--text - 命名必须带明确前缀，
--bg和--user-profile-bg是两个完全独立的变量 - 避免泛化类名（如
.card），优先用业务语义名（如.order-summary-card）或生成唯一data-id
如何让 var(--x, fallback) 的 fallback 真正触发
很多人以为 fallback 是“没定义就用”，其实它是“当前作用域查不到才用”。如果 :root 里有 --x，哪怕组件内没声明，var(--x, red) 也会取 :root 的值，red 永远不生效。
- 想强制走 fallback，得先在组件内切断继承：
.my-component { --x: unset; } - 再写
color: var(--x, red)，此时因当前作用域值为unset，浏览器判定“查不到有效值”，fallback 才启用 - 别用
inherit或initial替代unset，它们不满足“查不到”的条件
运行时更新变量必须限定在组件根节点上
不能调 document.documentElement.style.setProperty('--x', 'red')，那又是全局污染。正确做法是只操作当前组件的根 DOM 节点：
立即学习“前端免费学习笔记（深入）”；
- 用
useRef或querySelector拿到组件最外层元素（比如带data-id="xyz789"的div） - 执行
ref.current.style.setProperty('--x', 'red') - 确保该节点在 CSS 中被选中过（例如写了
[data-id="xyz789"] { --x: blue; }），否则变量无作用域约束，其他组件可能意外读取 - SSR 场景下，服务端需同步注入初始
style字符串，否则首屏渲染时var()查不到值
--x: y，而是整条链——从声明位置、命名规则、继承控制到运行时更新——全部落在同一封装边界内。漏掉一个 unset，少加一个前缀，或 data-id 前后不一致，隔离就失效了。 
