不能直接用document.documentelement.style.setproperty()随意设值，因其会累积内联样式、不触发重绘、易被媒体查询或class覆盖；推荐用class/data-set切换驱动变量变更，并缓存getcomputedstyle读取结果以避免强制布局。
单页应用中，CSS变量本身不保存状态，它只是样式层的“值占位符”；真正需要管理的是「谁在什么时候改了哪个变量」以及「改完后如何让依赖它的样式/逻辑正确响应」——这本质上是个协调问题，不是存储问题。
为什么不能直接用 document.documentElement.style.setProperty() 随意设值
看似简单的一行代码，实际会引发三类隐性问题：
- 多次调用会累积内联样式，污染
style属性，干扰 CSS 优先级和调试 - 变量值变更不会自动触发重绘，
transition对变量名无效，比如transition: --primary-color 0.3s完全不生效 - 若同时有媒体查询（如
@media (prefers-color-scheme: dark)）或 class 控制的同名变量，JS 设置的值可能被覆盖且无提示
推荐做法：用 class 切换驱动变量变更
把变量定义收拢到语义化 class 中，而不是靠 JS 拼字符串写内联。例如：
:root {
--bg: #fff;
--text: #333;
}
html[data-theme="dark"] {
--bg: #1a1a1a;
--text: #f0f0f0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #121212;
--text: #e0e0e0;
}
}
切换时只操作 class 或 dataset：
document.documentElement.dataset.theme = "dark"document.documentElement.classList.add("high-contrast")
这样做的好处是：变量作用域清晰、可被 DevTools 审查、支持 CSS 动画过渡、与系统偏好自动协同。
需要 JS 动态读取变量值？别频繁调 getComputedStyle().getPropertyValue()
每次调用都会触发强制同步布局（forced layout），尤其在滚动或动画帧中极易卡顿。真实项目里常见错误是：
- 在
requestAnimationFrame里反复读--scroll-offset - 组件
useEffect中没缓存，每次渲染都重新取--font-scale
优化方式很简单：
- 用
ref缓存最近一次读取结果 + 时间戳，5 秒内相同 key 直接返回缓存值 - 监听
MutationObserver（监控class或style属性变化）自动清缓存 - 对主题类变量，优先监听
matchMedia变更而非轮询读取
变量命名和作用域容易被忽略的细节
很多人以为 --color-primary 写在 :root 就万事大吉，但实际出问题常在这几个点：
- 局部组件变量没加前缀，比如
.card { --shadow: ... }和全局--shadow冲突，导致卡片阴影突然消失 - 变量名含数字开头（如
--2xl）或特殊符号，CSS 解析失败，但控制台不报错 - 在伪元素里用
var(--icon-url)，但值是相对路径，浏览器按当前 CSS 文件位置解析，而非 HTML 页面位置
真正难的从来不是“怎么设”，而是“设完之后谁还依赖它、是否已更新、有没有被更高优先级规则静默覆盖”。管理 CSS 变量，本质是管理样式系统的契约关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
