:root 是 CSS 伪类选择器，匹配文档根元素（HTML 中为 ），特异性高于 html 选择器，主要用于声明全局 CSS 自定义属性，是主题切换和设计系统变量管理的首选挂载点。
什么是 :root，它和 html 有什么区别
:root 是 CSS 伪类，匹配文档的根元素，在 HTML 中等价于 html 元素，但优先级更高（特异性为 0-1-0，而 html 是 0-1-0 —— 表面一样，但规范明确 :root 在层叠中更靠前，尤其在被 !important 干扰或与 JS 动态 style 冲突时更稳定）。它唯一可靠的作用是作为 CSS 自定义属性（--xxx）的挂载点，因为自定义属性必须声明在某个选择器作用域内，而 :root 是全局最安全、最无副作用的位置。
别写成 html { --color-primary: #007bff; }，虽然能用，但语义弱、可维护性差；也别漏掉分号——--color-bg: #fff 缺少分号会导致后续声明静默失效。
如何用 :root 实现主题切换（不依赖 JS 框架）
核心思路：把不同主题的变量值分别写在不同选择器下，通过切换根元素的 class 来激活对应主题块。不是只写一个 :root，而是写多个带 class 修饰的 :root 规则。
-
:root { --color-text: #333; --color-bg: #fff; }—— 默认主题 -
:root[data-theme="dark"] { --color-text: #eee; --color-bg: #1a1a1a; }—— 暗色主题 -
:root[data-theme="blue"] { --color-primary: #1e88e5; --color-accent: #2196f3; }—— 蓝色主题（可叠加覆盖部分变量）
切换时只需 JS 执行 document.documentElement.setAttribute('data-theme', 'dark')。注意不要用 className 直接替换，否则会清掉其他可能存在的 class（如用于 SSR 或 A/B 测试的 class）。
立即学习“前端免费学习笔记（深入）”；
为什么不能直接在 :root 里用 @media 嵌套变量
CSS 自定义属性本身不支持媒体查询条件判断，@media (prefers-color-scheme: dark) { :root { --color-bg: #121212; } } 这种写法语法合法，但存在两个实际问题：
- 浏览器首次渲染时若系统主题未触发媒体查询（比如页面加载快于系统通知），变量可能取错值，且不会自动响应后续系统切换
- 无法与手动切换的主题共存——你写了暗色媒体查询，用户又点了“亮色”按钮，两者冲突，CSS 层叠规则会让后声明的生效，但逻辑混乱难调试
正确做法是统一收口到 data-theme，再由 JS 同时监听 matchMedia 和用户操作，主动设置 data-theme 值。这样控制权清晰，变量来源唯一。
哪些值适合放 :root，哪些不该放
适合的：颜色、间距缩放系数（--space-xs: 4px）、圆角尺寸、字体大小基准（--font-size-base: 16px）、阴影强度（--shadow-sm: 0 1px 2px rgba(0,0,0,0.1)）——这些是设计系统中真正跨组件复用、需集中管理的原子值。
不该放的：
- 具体组件样式，比如
--button-padding—— 容易导致过度抽象，反而增加理解成本 - 动态计算值，如
--height: calc(100vh - var(--header-height))——:root不支持calc()外部引用变量后再参与计算，会报无效值 - 带单位的复合值，如
--transition: all 0.2s ease—— 看似方便，但一旦要微调某处过渡时间，就得重写整个字符串，不如拆成--duration: 0.2s和--ease: ease
变量名建议用中划线分隔、语义化前缀，比如 --color-brand-primary 而非 --primary-color，避免和未来 CSS 原生属性（如 color-scheme）或框架变量冲突。
