直接修改 :root 中的 css 变量可实现全局自动更新，但需确保变量定义在 :root、引用时带后备值（如 color: var(--text-color, #333)）、动态修改仅对 :root 变量生效，并注意继承机制——子元素必须显式使用 var() 才能响应父级变量变化。
直接改 :root 里的变量值，所有用 var(--xxx) 的地方自动更新——这是提升复用性的最简路径，但得注意作用域、后备值和继承行为，否则容易改了没生效。
定义变量时必须用 :root 才能全局复用
很多人把变量写在 body 或某个 class 里，结果只在局部生效，根本达不到“一处修改、全局响应”的目的。
-
:root是 HTML 文档的根元素，等价于html，但优先级更高，确保变量可被任何后代元素读取 - 别写成
html { --color: red; }，虽然也能用，但不符合规范，某些旧版 Safari 会漏掉 - 组件级局部变量可以写在具体选择器里（比如
.card { --card-padding: 16px; }），但那是为了隔离，不是为了复用
var() 引用时必须带后备值才防崩
变量未定义或拼错时，var(--missing) 会让整条声明失效（比如 color: var(--missing); → 该属性被丢弃），页面可能突然失色或错位。
- 后备值不是可选项，是安全底线：写成
color: var(--text-color, #333); - 后备值支持完整 CSS 值，包括函数：
padding: var(--spacing-unit, 8px) calc(var(--spacing-unit, 8px) * 2); - 不要依赖浏览器默认值（比如
color: inherit），明确写出来更可控
JavaScript 动态改变量前先确认作用域链
用 document.documentElement.style.setProperty('--color', 'red') 确实能改，但若变量是在子元素里定义的（比如 .theme-dark { --bg: #111; }），这个操作完全无效。
- 动态修改只对
:root下定义的变量起效，其他作用域的变量无法被 JS 全局访问 - 想切换主题，就老老实实只在
:root定义主题相关变量，别拆到多个选择器里 - 检查是否生效：打开 DevTools → Elements → 选中
html元素 → 查看 Styles 面板里有没有新增的style行内属性
真正容易被忽略的是继承机制：CSS 变量天然继承，但 var() 的解析发生在计算值阶段，不是声明阶段。这意味着父元素改了变量，子元素不用重写规则，但前提是子元素确实用了那个 var() —— 没引用就等于没接入系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
