CSS变量作用域受限于定义位置，仅在声明选择器及其后代中生效；var()向上查找最近有效定义，不继承值；应使用命名空间前缀避免冲突，禁用all重置以免破坏继承链。
var() 读取不到变量，是因为作用域没对上
CSS 变量（--my-var）不是全局广播，它只在定义它的选择器及其后代中“可见”。如果你在 .card 里写了 --color: blue，那只有 .card > * 能通过 var(--color) 读到它；body 或兄弟元素完全读不到。
常见错误：
- 在
:root定义变量，却期望某个局部组件覆盖后不影响其他地方——结果所有用var(--color)的地方都跟着变 - 在
div上设变量，但子元素匹配到了更宽泛的选择器（比如p），而该选择器的样式规则在变量定义之前加载，导致计算时变量未就绪 - 用 JavaScript 调用
setCssVar('--x', 'red')却没传第二个参数node，默认写到了:root，污染全局
正确做法是把变量注入到有明确边界的容器上，例如：.user-card { --text-primary: #1a1a1a; }，然后所有子元素直接 color: var(--text-primary) —— 这样变量天然绑定在组件内，不逃逸。
为什么子元素 var() 值和父元素定义的不一样
因为 var() 不是“取父元素当前值”，而是“向上查找最近一个有效定义”。它走的是 CSS 继承链，但变量本身不继承，var() 查找行为才继承。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 如果
.modal设了--z-index: 1000，里面一个.modal__overlay又设了--z-index: 999，那么.modal__overlay > .btn读到的是999，不是1000 - 如果某层中间没定义该变量，查找会继续向上，直到
:root或断掉（返回 fallback 或无效） - 媒体查询里重写变量（如
@media (prefers-color-scheme: dark) { .card { --text-primary: #f0f0f0; } }）只影响该容器及后代，不会波及其他.card
别指望靠“父元素没覆盖就自动用上一级”，要显式在每一级容器里定义你关心的变量快照。
组件库变量名冲突：--color-primary 到底是谁的
像 Varlet、Element Plus 这类库，常把 --button-primary-color: var(--color-primary) 这种写法暴露出来。问题在于：一旦你在 :root 改了 --color-primary，所有依赖它的组件变量全跟着变——包括你根本没想动的 --input-border-color。
真正可控的方式是切断这种跨组件依赖：
- 避免在
:root定义通用名变量（如--primary），改用带前缀的（--app-primary、--card-primary） - 组件内部变量尽量不依赖外部变量，或只依赖自己命名空间下的（
--button-primary-color: var(--button-primary)） - 若必须复用设计系统变量，用
setCssVar时指定具体节点，而不是整个document.documentElement
第三方库的变量是“开放接口”，不是“配置入口”；把它当文档看，别当配置项改。
all: revert 和 all: unset 会让 var() 行为更难预测
all 属性会重置所有 CSS 属性，包括自定义属性的继承行为。尤其是 all: unset：它让元素丢掉所有 UA 样式 + 所有继承值，var(--x) 还能读，但 color、font-size 这些支撑显示的基础属性全没了，容易导致文字不可见、按钮无尺寸等隐性故障。
更危险的是 all: revert：它会尝试恢复 UA 默认值或父级继承值，但自定义属性不在 UA 恢复范围内，所以 var() 仍按原规则查找，而周围基础样式却变了——结果就是颜色对了、字体小了、行高塌了。
除非你明确知道要重置什么，否则：
- 别对组件根节点用
all，尤其别用在button、input等表单控件上 - 需要“清空第三方内容样式”时，用 wrapper 包一层，只对该 wrapper 设
all: unset，再手动补关键继承属性（color、font-family、line-height） - 优先用
revert替代unset，至少它会保留 UA 默认字体栈和 focus outline
变量作用域本就依赖 DOM 层级和样式层叠，加一层 all 就等于在继承链中间插了个黑盒，debug 时 computed 面板里连“inherited from”都可能消失。
