var(--color)首屏显示透明或默认色，是因为变量未定义时会回退到属性初始值（如color为inherit、background-color为transparent），常见于CSS加载顺序错乱、作用域中断或无fallback。
自定义属性（--*）本身不会导致首屏样式错误，但它们的加载时机、作用域链和 fallback 机制在未被显式控制时，极易引发视觉错乱——尤其是当依赖它们的 CSS 规则在变量尚未声明或继承中断时就已计算完成。
为什么 var(--color) 在首屏渲染时显示为透明/默认色
浏览器解析 CSS 时，var() 函数会立即求值；若变量未在当前作用域或继承链上定义，它会回退到初始值（如 color 属性回退为 inherit，而 background-color 回退为 transparent），造成元素“消失”或颜色异常。
- 常见场景：CSS 文件异步加载、
@import延迟注入、或变量定义写在了使用它的规则之后（即使在同一文件中） -
:root中声明的变量并非“全局提前可用”，它仍受 CSS 解析顺序约束；若:root块出现在.btn { background: var(--primary); }之后，该var()就是无效的 - 动态插入的
<style>或 JS 注入的 CSS，若未等变量定义就应用，同样触发 fallback
如何确保 var() 在首屏渲染前就位
关键不是“定义得早”，而是“在首个用到它的规则之前、且在同一次 CSS 解析周期内完成定义”。
- 把所有变量声明集中放在
<head>中第一个<style>或<link rel="stylesheet">的最顶部（不要拆散到多个文件末尾） - 禁用
@import：它会阻塞后续规则解析，导致变量定义延迟；改用并行<link> - 避免在
@media或@supports内部定义会被首屏用到的变量——这些规则可能不触发，变量即不可见 - 对关键变量提供 fallback：写成
var(--primary, #007bff)，而非裸写var(--primary)；fallback 值必须是合法 CSS 值
JS 动态设置 style.setProperty() 为何首屏仍错乱
因为 JS 执行发生在 DOM 解析完成后，远晚于 CSSOM 构建与首次布局（Layout）——此时所有 var() 已按无定义状态 fallback 完毕，再 setProperty 也改不了已渲染的结果。
立即学习“前端免费学习笔记（深入）”；
- 除非配合强制重排（如读取
offsetHeight），否则无法触发样式重计算 - 更稳妥的做法：在 HTML 的
<html>或<body>上预设 class（如theme-light），用 CSS 选择器切换变量值，而非 runtime 修改 - 若必须 JS 控制，优先用
document.documentElement.style.setProperty()并确保在DOMContentLoaded前执行（如模块脚本 +type="module"+defer不够早）
真正容易被忽略的是：自定义属性的 fallback 不是“兜底显示”，而是“参与级联计算的合法值”；一旦 fallback 生效，它就和其他硬编码值一样参与后续所有计算（比如 calc(var(--gap, 1rem) * 2) 会算出 2rem），这会让问题更隐蔽——你以为是变量没生效，其实是 fallback 值悄悄改变了布局逻辑。
