在 :root 中定义 CSS 变量的正确写法是直接使用 --name: value; 语法；变量名须以--开头，仅支持字母、数字、短横线和下划线；必须设 fallback 值以防未定义导致样式失效；JS 应通过 document.documentElement.style.setProperty() 动态修改。
在 :root 中定义 CSS 变量的正确写法
直接在 :root 里用 --primary-color: #3b82f6; 这类语法定义变量，是唯一可靠的方式。不能写成 color: var(--primary-color); 这种赋值语句放在 :root 里——那只是声明使用变量，不是定义。
常见错误是把变量定义混在某个组件选择器里（比如 .button { --primary-color: red; }），这样变量只在该选择器作用域生效，全局替换就失效了。
-
:root是 CSS 自定义属性的全局作用域，等价于html元素，但优先级更高、语义更明确 - 变量名必须以两个短横线开头（
--），后面只能跟字母、数字、短横线、下划线 - 不支持 CSS 预处理器那种嵌套或计算逻辑，
--bg: calc(var(--primary) * 0.1)会报错
如何用 JS 动态切换主题色变量值
改 :root 的变量值，本质是修改 DOM 上的样式属性。最稳妥的方式是获取 document.documentElement，然后调用 style.setProperty()。
别用 document.body.style.setProperty() —— body 不是变量的作用域根，改了无效；也别用 document.querySelector(':root').style...，因为 :root 是伪类，无法被 querySelector 匹配。
- 设置深色模式：
document.documentElement.style.setProperty('--primary-color', '#6366f1'); - 还原默认：
document.documentElement.style.removeProperty('--primary-color'); - 批量设置建议封装函数，避免重复写
document.documentElement.style
变量 fallback 值不是可选，而是必须考虑的容错点
var(--primary-color, #3b82f6) 里的后备值（fallback）不是“锦上添花”，而是防止变量未定义时整个样式崩掉的关键。浏览器遇到未定义变量且无 fallback，会直接丢弃该声明。
典型翻车场景：JS 切换主题失败、网络延迟导致 CSS 未加载完、变量名拼错（比如 --primay-color 少了个 r）——这些都会让 var(--primary-color) 返回无效值，进而让 color、background 等属性失效。
- 所有生产环境使用的
var()调用都应带 fallback，哪怕只是var(--color, currentColor) - fallback 不能是另一个变量（
var(--color, var(--fallback))），不合法 - 媒体查询中覆盖变量时，也要同步更新 fallback 值，否则响应式逻辑可能错乱
CSS 变量不触发重排，但 cascade 层级容易误判
改变量值本身不会触发 layout（重排），这是它比 class 切换方案的优势。但很多人忽略：变量值生效依赖 CSS 继承和层叠顺序，不是“一设就全局立刻变”。
例如你在 :root 设了 --text-color: #1f2937，又在 .card 里写了 --text-color: #37414d，那么 .card p 里的文字颜色取决于 p 是否显式继承了该变量——如果 p 写了 color: var(--text-color);，它就会取 .card 作用域下的值。
- 变量作用域由选择器决定，不是“全局变量”意义上的全局
- 子元素能否读到父元素设置的变量，取决于是否继承（
color、font-size等可继承属性才自动继承变量值） - 用 Chrome DevTools 的 Computed 面板看
color值时，要展开才能看到实际解析出的变量值，别只盯着 Styles 面板里的var(--x)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
