全局css变量必须用:root声明，因其是规范定义的文档根元素锚点，确保所有后代、svg及shadow dom均可访问；html或body声明会导致作用域残缺、ssr失效或伪元素读取失败；声明须以--开头、每行末尾加分号、冒号无空格、字符串加引号；动态更新唯一安全方式是document.documentelement.style.setproperty()；var()引用必须带合法fallback值，否则变量未定义时行为不可控。
全局 CSS 变量必须用 :root 声明，不能写成 html 或 body
因为只有 :root 是规范定义的文档根元素锚点，能确保变量在所有继承链、所有子元素、甚至 SVG/Shadow DOM 中都可访问。写成 html { --color: red; } 表面有效，但遇到 SSR 注入、@import 样式或同级伪元素时，变量可能读不到；body { --x: 1; } 更糟——head 里的样式、html 自身、title 都不继承它。
声明时还容易漏掉硬性语法细节：
– 每行末尾必须加分号（包括最后一行），否则后续整块变量失效；
– 冒号前后不能有空格：--size: 16px ✅，--size : 16px ❌；
– 字符串值必须加引号：--font: "Inter", sans-serif ✅，--font: Inter, sans-serif ❌（空格截断后只剩 Inter）。
document.documentElement.style.setProperty() 是唯一安全的 JS 修改方式
想动态改全局变量，只能调用 document.documentElement.style.setProperty('--primary', '#007bff')。这个调用等价于操作 :root 的内联样式，是唯一能触发全局重计算的入口。
常见错误：
– 用 document.body.style.setProperty('--primary', ...) → 只往 元素塞了个无效内联属性，页面无变化，控制台也无报错；
– 用 document.documentElement.style.cssText = '--primary: #007bff' → 会清空所有已有自定义属性，导致其他变量丢失；
– 忘记 -- 前缀或漏单位（如传 '24' 而非 '24px'）→ 静默失败，CSS 不解析。
var() 必须带 fallback，否则变量未定义时行为不可控
var(--text-color) 这种裸写法极其危险：拼错名、JS 未执行、异步加载延迟都会让变量为空，此时浏览器按规范回退为初始值（比如 color 回退为 black，background 可能变成 transparent），文字突然消失或背景透出底层内容。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确写法一律加 fallback：
– color: var(--text-color, #333) ✅
– font-size: var(--font-size-lg, 1.25rem) ✅（注意 fallback 必须是该属性合法值，auto 在 font-size 里非法）
– box-shadow: var(--shadow, 0 2px 4px rgba(0,0,0,0.1)) ✅
嵌套 var() 不支持：var(--a, var(--b)) 整个表达式失效，只能单层展开。
局部变量不能被 document.documentElement 修改，需明确作用域边界
你在 .card { --card-bg: #f9f9f9; } 里定义的变量，只属于 .card 元素及其后代，document.documentElement.style.setProperty('--card-bg', ...) 完全无效——因为变量不在 :root 作用域。
要 JS 控制局部样式，只有两条路：
– 给目标元素加 ref 或 class，用 el.style.setProperty('--card-bg', '#eef') 直接操作（前提是该元素已声明该变量）；
– 把变量“提升”到 :root，再通过 class 或 data 属性做条件切换，比如 :root[data-theme="dark"] { --card-bg: #222; }。
别指望 data- 属性或 class 变更自动触发 CSS 变量更新——它们只是 DOM 属性，和 CSS 变量无绑定关系。变量生效靠的是选择器匹配 + 层叠计算，不是响应式监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
