CSS变量需以--开头并在选择器内声明，用var()读取且支持fallback；主题切换应通过class控制而非直接JS修改；var()可嵌入calc()但有兼容陷阱，不支持直接transition监听；需用前缀避免命名冲突。
var() 函数怎么声明和读取 CSS 变量
CSS 变量本质是自定义属性，必须用 -- 开头，且只能在选择器作用域内声明；var() 是唯一读取方式，不支持直接写 color: --primary; 这种写法。
常见错误：在 :root 外声明却指望全局可用，或漏写括号写成 var --color（语法报错）。
-
:root { --primary: #007bff; }是最常用声明位置，等价于全局作用域 - 组件级变量可写在具体选择器里：
.card { --shadow: 0 2px 4px rgba(0,0,0,.1); } - 读取时支持 fallback：
color: var(--text-color, #333);，当变量未定义时生效 - fallback 不能是另一个
var()，也不能带单位（如var(--size, 16px)合法，但var(--size, 1rem)在部分旧浏览器会失效
主题切换时为什么不能只改 :root 变量
单纯覆盖 :root 里的变量值，对已计算的样式无影响——CSS 变量是实时求值的，但浏览器不会重排所有依赖它的元素。问题常出现在动态切换后颜色没变、动画卡住或伪元素样式丢失。
根本原因是：变量变更本身不触发重绘，除非对应属性被重新解析（比如 class 切换、强制重排、或属性值实际变化）。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用 class 控制主题，例如
html[data-theme="dark"]，并在该 class 下重写变量值 - 避免直接 JS 修改
document.documentElement.style.setProperty('--color', '...')后就认为万事大吉 - 如果必须用 JS 动态设值，记得触发一次最小重排，比如
getComputedStyle(document.body).opacity - 注意媒体查询中定义的变量（如
@media (prefers-color-scheme: dark)）优先级低于显式 class，容易被覆盖
var() 在 calc() 和 transition 中的兼容性陷阱
var() 能进 calc()，但不是所有组合都安全；transition 也无法直接监听变量变化——它监听的是最终属性值（如 background-color），不是变量名。
典型现象：写了 transition: --primary 0.3s，结果完全不生效，控制台还报“invalid property name”。
-
width: calc(var(--base-size) * 2);合法，但calc(var(--gap) + 10px)在 Safari 15.4 之前会失败，需写成calc(10px + var(--gap)) - 想实现颜色过渡，必须把变量映射到真实属性上，例如
background-color: var(--bg-color); transition: background-color 0.3s; - 不要试图在
@keyframes里用var()控制关键帧数值，动画过程不会响应变量更新 - IE 完全不支持
var()，哪怕加了 polyfill 也撑不起复杂主题系统
如何避免 CSS 变量命名冲突和泄漏
变量名没有命名空间，--color 和 --color 在同一作用域下会覆盖，第三方组件也可能用相同前缀。这不是“能不能用”的问题，而是“什么时候被悄悄改掉”的问题。
真实场景：引入一个 UI 库后，自己的 --primary 突然变蓝，查了半天发现库在 :root 里也定义了同名变量，且加载顺序靠后。
- 约定前缀比拼长度更有效，比如
--myapp-primary、--ui-button-padding - 避免在
:root声明大量细粒度变量（如--h1-font-size），优先用语义化抽象（--text-heading） - 用
CSSStyleSheet.cssRules或 DevTools 的 Styles 面板手动检查变量是否被覆盖，别只信源码顺序 - 构建时无法静态分析变量依赖，所以大型项目建议配合 PostCSS 插件做命名校验，而不是靠人眼盯
变量管理真正的难点不在声明和替换，而在跨团队、跨版本、跨上下文时谁在什么时候改了哪个 -- 开头的东西——它不像 JS 模块有明确导出和作用域隔离。
