直接在 :root 定义 --primary-color 会污染组件颜色，因其全局生效且易被覆盖；应将变量声明在组件选择器内并加前缀；fallback 仅在当前作用域查不到时触发，需用 --color: unset 切断继承；currentColor 更适合单色隔离场景。
为什么直接在 :root 定义 --primary-color 会污染组件颜色
因为 CSS 变量没有天然作用域，:root 声明的变量全局可读可继承。你写 --primary-color: #007bff，所有组件里的 var(--primary-color) 都会取到它——这不是复用，是强耦合。一旦另一个组件（比如第三方库）也定义同名变量，后加载的 CSS 就会覆盖前者的值，颜色就“悄无声息地变了”。
如何让每个组件自带一套不冲突的颜色变量
把变量声明写进组件选择器内部，而不是 :root：
-
.user-card { --user-card-bg: #fff; --user-card-text: #333; }—— 变量只在该选择器匹配的元素及其后代中生效 - 必须搭配明确的组件类名（如
.user-card、.product-list），不能用泛化名（如.card） - 命名必须带前缀：
--button-primary和--header-primary是两个变量，互不影响 - 构建时可用
postcss-prefix-vars自动加前缀，避免手写遗漏
var(--color, fallback) 的 fallback 为什么经常不生效
很多人以为 fallback 是“没定义就用这个”，其实它是“当前作用域查不到才用”。如果组件内没声明 --color，但 :root 或父级有，那 var(--color, red) 会取父级值，red 根本不会触发。
想强制走 fallback，得先在组件内显式切断继承链：
立即学习“前端免费学习笔记（深入）”；
.my-component { --color: unset; }- 再写
color: var(--color, red);—— 此时因当前作用域值为unset，查不到有效值，fallback 才生效 - 注意：
inherit或initial不等于unset，它们可能绕过你的局部变量设置
currentColor 比 CSS 变量更适合某些颜色隔离场景
当组件只需要“和文字颜色保持一致”时，currentColor 是更轻量、更可靠的方案：
- 它只读取当前元素自身的
color值，不依赖任何自定义变量 - 不受外部
--xxx干扰，也不参与变量继承链 - 例如边框、图标、伪元素颜色：
border-color: currentColor;，天然隔离 - 但它无法表达多色系统（比如同时控制背景、文字、边框为不同但协调的色），这时仍需带前缀的 CSS 变量
真正难的不是写对一行 --xxx，而是确保整条变量链从声明、使用到重置都落在同一封装边界里。漏掉一个 unset，或少写一个前缀，污染就可能从某个角落悄悄渗进来。
