必须在:root中声明CSS变量，因其是W3C规范唯一认可的全局作用域锚点，覆盖整个文档树，确保所有后代（含伪元素、SVG、Shadow DOM）可继承；写在body、html或class中会导致作用域受限、继承断裂或跨文件不可访问。
必须在 :root 中声明，且变量名以 -- 开头，否则浏览器直接忽略——这不是警告，是实际发生的行为。
为什么只能写在 :root 里
因为 :root 是 CSS 中唯一能覆盖整个文档树的作用域锚点。写在 body、html 或任意 class 里，变量只对后代元素生效，但无法被 head 中的样式、@import 的外部文件、或伪元素（如 ::before）可靠读取。
-
:root等价于html，但优先级更高，且语义明确，是 W3C 推荐的全局声明位置 - 写成
html { --color: red; }看似等效，但某些浏览器在解析顺序或继承链上会出偏差 - 媒体查询内嵌的
:root块也合法，比如@media (prefers-color-scheme: dark) { :root { --text: #eee; } }，它仍是全局作用域
var() 的使用和回退值失效的常见原因
回退值（var(--x, #000) 中的 #000）不是“兜底逻辑”，而是严格的语法校验机制：只有当变量名拼错、变量未声明、或变量值本身非法（如 --size: 12; 缺单位）时才启用。
-
--bg: transparent;是合法值，var(--bg, white)永远不会用white -
--color: ;（空值）或--color: undefined;（字符串）会导致回退触发 - 浏览器开发者工具中，失效的
var()会标为invalid，悬停提示具体原因 - 关键样式别依赖回退，比如
background: var(--surface-bg, #fff); color: var(--text-primary, #111);更安全
命名与值类型的实际约束
自定义属性不校验语义，只认语法。但错误的命名或值类型会导致静默失败或不可预期的继承行为。
立即学习“前端免费学习笔记（深入）”；
- 变量名必须以
--开头，primary-color不行，--primary-color才行；大小写敏感 - 值必须是合法 CSS 值：
--hue: 210;单独无效，得配合hsl(var(--hue), 70%, 50%)使用 - 避免在
:root中写color: var(--text);——:root不渲染，这条声明无意义 - HSL 比 RGB 更适合后期调整，比如
--brand-h: 210; --brand-s: 70%; --brand-l: 50%;，再组合成hsl(var(--brand-h), var(--brand-s), var(--brand-l))
真正容易被忽略的是变量的“声明时机”：如果 CSS 文件加载顺序错乱，或 JS 在变量定义前就调用 getComputedStyle(document.documentElement).getPropertyValue('--x')，拿到的就是空字符串。这不是 bug，是级联规则本身的执行节奏。
