必须用 :root 而不是 html 声明变量，因为 :root 是 CSS 规范指定的全局变量“锚点”，特异性更高（0-1-0 vs 0-0-1），跨文档兼容（SVG/XML 有效），语义明确且继承更可靠；html 声明易被覆盖，body 声明则导致变量无法向上继承。
为什么必须用 :root 而不是 html 声明变量
:root 是 CSS 规范指定的全局变量“锚点”，它比 html 选择器优先级更高（特异性 0-1-0 vs 0-0-1），且在 SVG、XML 等非 HTML 文档中仍能正确匹配根元素。写成 html { --color: red; } 虽然多数场景下能工作，但在 Shadow DOM 边界、多层嵌套组件或旧版 Safari 中，变量可能无法可靠继承。更关键的是，:root 的语义明确——它就是“整个文档的作用域起点”，而 html 只是一个标签选择器，容易被后续样式意外覆盖。
常见错误包括：body { --color-primary: #007bff; }，结果子元素读不到；或误写成 html:root（语法非法）；又或者漏掉分号导致后续声明静默失效（如 --size: 16px 后没加分号，--color 就不会注册）。
:root 里变量怎么写才不踩坑
:root 块必须放在样式表靠前位置（最好在 <style></style> 开头或独立 CSS 文件顶部），确保变量在被引用前已注册。变量名严格区分大小写，--Text 和 --text 是两个变量；必须以双破折号开头，否则不被识别为自定义属性。
- 值支持任意合法 CSS 值：
--gap: 1rem、--shadow: 0 2px 4px rgba(0,0,0,0.1)、--font-stack: "Inter", sans-serif - 允许链式引用：
--size-lg: calc(var(--size-md) * 1.25)，但禁止循环（如--a: var(--b)+--b: var(--a)） - 单位不能分离：
--size: 16不行，必须写--size: 16px；calc()内可混合单位：--width: calc(100% - var(--gap) * 2) - 不要在
:root里直接用var(--x)引用未声明变量，部分旧版 Safari 会解析失败
如何安全使用 var(--x) 并避免失效
var(--x) 不是“取值函数”，而是“运行时计算表达式”——它只在样式计算阶段向上查找最近的有效定义。失效通常不是语法错，而是作用域或值本身问题。
典型失效场景：
- 拼写不一致：
--text-color和var(--text-colour)→ 浏览器静默回退到初始值 - 变量未定义：
var(--bg, #fff)中--bg根本没声明 → fallback 生效，但你可能误以为主题生效了 - 值非法：
--size: 12px 16px（多值未用引号包裹）→ 整条声明被丢弃，var(--size)失效 - 继承被中断：元素设了
all: unset或位于 Shadow DOM 内部 → 无法访问:root变量
务必写 fallback：color: var(--text-color, #333)。fallback 不能含嵌套 var()，也不能有语法错误（如 var(--size, 16 px) 中空格会导致解析失败）。
主题切换时为什么有些元素没变色
变量更新是实时的，但重绘依赖“对应属性是否实际参与渲染”。如果某个按钮的样式写成color: #333 !important;，那改 --text-color 完全无效；或者该元素压根没在任何地方用 var(--text-color)，自然无反应。
动态切换推荐统一收口到 data-theme：
立即学习“前端免费学习笔记（深入）”；
- JS 只执行
document.documentElement.setAttribute('data-theme', 'dark')，不操作 class 或重载 CSS - CSS 写成：
:root { --color-text: #333; } :root[data-theme="dark"] { --color-text: #eee; } - 避免
@media (prefers-color-scheme: dark) { :root { ... } }单独使用——它无法与用户手动切换共存，且首次加载可能取错值 - 改完变量后，若页面没响应，检查目标元素是否真用了
var()，以及有没有更高优先级的硬编码值覆盖它
真正麻烦的不是定义变量，而是确保每个用到它的样式规则都处于正确的继承链上，并且没有被 !important、all: unset 或 Shadow DOM 隔离掉。
