getComputedStyle().getPropertyValue() 返回空字符串，既可能表示变量被声明但值为空，也可能表示根本未声明；两者无法仅凭返回值区分，需结合DevTools的Computed面板和样式检查确认。
getComputedStyle().getPropertyValue() 返回空字符串，不代表变量未定义
调用 getComputedStyle(el).getPropertyValue('--color') 得到 ""（空字符串），常见误解是“变量没定义”，其实它只说明：该变量在 el 或其祖先上**被声明了但值为空**，或**根本未声明**。两者无法靠返回值区分。
真正未声明时，浏览器不会报错，也不会返回 null 或 undefined——一律返回空字符串。要确认是否真未定义，得结合两步：
- 查 DevTools 的 Computed 面板，看
--color是否出现在计算属性列表里（有则已声明） - 手动检查
:root或目标元素的style属性，确认是否有--color: ...声明，且值不是""、none或带非法空格（如--size: 12 px）
内联样式里写 var(--x) 永远不生效
HTML 的 style 属性是纯静态解析，不走 CSS 变量替换流程。写 <div style="color: var(--primary)">，浏览器直接忽略整条声明，DevTools 的 Styles 面板里都看不到它，Computed 里也查不到来源。
这不是拼写错误或作用域问题，是所有主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）统一行为。想让内联样式“动态”用变量，必须用 JS 提前算出值：
立即学习“前端免费学习笔记（深入）”；
- 用
getComputedStyle(document.documentElement).getPropertyValue('--primary').trim()读取 :root 定义的值 - 注意传参节点：变量若定义在
.theme-dark { --bg: #111 }里，就得传对应元素节点，不能传document.documentElement - 确保执行时机：CSS 已加载完成、变量已定义，否则
getPropertyValue()返回空字符串
var(--x, fallback) 回退值不触发，大概率是因为变量“被定义了但值非法”
写了 color: var(--text-color, #333) 却没生效，不是语法错，而是 --text-color 其实存在，只是值无效：比如 --text-color: ;、--text-color: none、或 --text-color: 123。此时浏览器仍会尝试用这个非法值，最终降级为属性初始值（如 color 变成 inherit），而非你写的 #333。
回退值只在变量**完全未声明**，或被 initial/unset 显式设为无效时才启用。调试建议：
- 打开 DevTools → Elements → 找到对应元素 → 看 Styles 面板中该
var()声明是否被划掉（表示被忽略） - 检查变量定义处的值是否带多余空格、分号或非法字符
- 避免在构建时注入空字符串：
--size: ""是合法声明，但会让后续var(--size, 16px)拿到空值，导致样式崩坏
外部 CSS 中 var() 报空值，80% 是 <link> 加载顺序错了
如果 theme.css 里用了 var(--primary)，但 base.css（含 :root { --primary: #007bff }）在 HTML 中写在它后面，浏览器解析 theme.css 时变量还没定义，所有 var() 都降级为空。
修复很简单：把定义变量的 CSS 文件（如 base.css）放在所有引用它的 CSS 之前。注意构建工具的影响：
- Vite 默认异步加载 CSS，可能错过初始渲染，需检查插件配置
- Webpack 的
mini-css-extract-plugin若提取顺序混乱，也会导致变量未就绪 - 不要依赖
@supports (color: var(--x))来检测——Safari 12–14 不支持该语法，且它本身不能解决加载顺序问题
最容易被忽略的是：变量作用域和加载时机是两个独立维度。即使 :root 定义了变量，若 CSS 文件 404 或被 CSP 阻止，或 JS 动态插入太晚，var() 依然读不到——得逐层验证网络请求、DOM 插入点、以及 DevTools 中 CSSOM 是否真实包含该变量声明。
