var() 默认值是降级取值而非回退终点，支持嵌套var()链式降级，仅在变量完全未声明或被initial/unset设为无效时触发，需防循环引用与作用域错误。
var() 的默认值不是“回退”，而是“降级取值”
当 var(--color) 中的 --color 未定义时，浏览器不会报错，也不会跳过，而是直接尝试取你写的默认值（第二个参数）。但这个默认值本身也支持嵌套 var()，且仍会继续降级——也就是说，默认值不是“兜底终点”，而是一次新的变量查找起点。
常见错误现象：写了 var(--color, #000)，结果样式没生效，以为是变量没定义导致黑块，其实是父元素没继承、或变量被 unset 覆盖、或作用域不对。
- 默认值只在变量**完全未声明**（或被
initial/unset显式设为无效）时触发 - 若变量声明了但值非法（如
--color: 123），部分浏览器仍会尝试解析，不一定会走默认值 - 默认值中可再写
var(--fallback, #333)，形成链式降级
嵌套 var() 默认值要防无限循环
虽然 var(--a, var(--b, red)) 合法，但如果 --a 和 --b 相互引用（比如 --a: var(--b); --b: var(--a)），Chrome 和 Firefox 会静默失败，最终渲染为初始值（如 color 变成 inherit），而不是报错或卡死。
使用场景：主题切换时想 fallback 到上一主题变量，但容易在 CSS 预处理器注入阶段就埋下循环依赖。
立即学习“前端免费学习笔记（深入）”；
- 避免在默认值里引用当前变量名（
var(--x, var(--x, black))是典型死循环） - 调试时用 DevTools 的 Computed 面板看最终计算值，比查源码更快定位哪一级掉链子
- 若需强 fallback，优先用明确字面量（
#fff、1px solid），而非再套一层变量
JavaScript 动态读写未定义 CSS 变量的行为差异
用 getComputedStyle(el).getPropertyValue('--size') 读未定义变量，返回空字符串 ""，不是 undefined 或 null；而 el.style.getPropertyValue('--size') 只读内联样式，未定义时也返回空字符串。两者都**无法区分“未定义”和“定义为空字符串”**。
性能影响：频繁调用 getComputedStyle 触发重排，尤其在滚动中读未定义变量，可能放大卡顿。
- 判断是否真正未定义，得结合
getComputedStyle+ 检查是否为空 + 看是否在 :root 或祖先上有声明 - 设置变量时，
el.style.setProperty('--size', '')会让后续var(--size, 16px)走默认值——因为空字符串是合法值，但被var()视为无效，从而触发降级 - 服务端渲染（SSR）中，JS 还没执行前，CSS 变量全靠 HTML 中的
:root声明撑着，漏写就是真未定义
媒体查询中未定义变量的默认值不随条件动态更新
写成 @media (prefers-color-scheme: dark) { :root { --text: var(--dark-text, #fff); } }，如果 --dark-text 在暗色模式下仍未定义，var() 仍会取 #fff，但它不会“等变量后面被 JS 注入再重算”。CSS 变量的计算发生在样式层叠完成时，不是响应式监听。
容易踩的坑：以为在 JS 里改了 --dark-text，媒体查询块里的 var(--dark-text, #fff) 就自动刷新，其实它只在该规则首次计算时取一次默认值。
- 媒体查询内的
var()默认值是静态快照，不绑定后续 JS 修改 - 想实现动态 fallback，得把所有可能用到的变量都在对应媒体查询里显式声明（哪怕只是
--dark-text: initial） - 用
env()（如env(safe-area-inset-top)）时同理：未定义环境变量不会触发var()默认值，而是按规范返回初始值
