用 :root 而不是普通 class 定义变量，因其提供全局、可继承、可动态修改的 CSS 自定义属性，支持媒体查询和主题切换，且仅 :root 伪类有效；命名需语义化、组织需模块化、JS 修改应直接操作 document.documentElement.style。
为什么用 :root 而不是普通 class 定义颜色/间距变量
因为 :root 提供的是 CSS 自定义属性（--color-primary 这类），它天然具有继承性、可被 JS 动态修改、支持媒体查询覆盖，且作用域是整个文档——比写一堆重复的 .btn-primary、.card-border 更易维护。
常见错误是把它当普通 class 用：比如写 .root { --color: red; }，这完全无效；必须用 :root 伪类，且只能在选择器里声明自定义属性，不能靠加 class 触发。
-
:root声明的变量默认全局生效，子元素用var(--color-primary)就能取到 - 不要在
:root里写布局样式（如margin、display），只放设计系统级常量 - 如果项目要兼容 IE，直接放弃——IE 完全不支持
var()和:root自定义属性
怎么组织 :root 变量才不会后期混乱
变量名必须带语义前缀，避免 --red 这种裸色值命名。一旦主题切换或深色模式加入，--red 到底是品牌红还是错误红就分不清了。
推荐结构：--color-brand-primary、--space-md、--radius-sm。层级清晰，搜索也方便。
立即学习“前端免费学习笔记（深入）”；
- 颜色按用途分组：
--color-text-default、--color-bg-surface，而不是--text-color - 间距统一用
space前缀，单位隐含为rem或px，别混用（比如一半写--gap-8一半写--spacing-lg） - 把
:root块单独抽成_variables.css或base.css，不要塞进组件文件里
如何用 JS 动态改 :root 变量实现换肤
直接操作 document.documentElement.style 是最轻量的方式，不用重载 CSS 或切 class。
例如切换深色模式：document.documentElement.style.setProperty('--color-bg-surface', '#1a1a1a');
- 批量更新时别反复调用
setProperty，先拼好字符串再一次性 set：el.style.cssText = '--color-bg: #000; --color-text: #fff;' - 注意变量名大小写敏感，
--Color-Primary和--color-primary是两个变量 - 若用 CSS-in-JS 库（如 Emotion），它生成的动态样式可能无法被
:root变量覆盖，优先走原生style.setProperty
为什么有些 var() 不生效，连 fallback 都没触发
最常见原因是拼写错误或作用域问题：变量在 :root 里定义了，但你在未继承的伪元素（如 ::placeholder）里用 var(--color-text)，而该伪元素没继承父级的自定义属性。
另一个坑是语法写错：color: var(--color-text, #333); 没问题，但写成 color: var(--color-text #333);（缺逗号）就会整个声明失效。
- 检查浏览器 DevTools 的 Computed 面板，看该元素是否真的计算出了
var()的值 - fallback 值必须是合法 CSS 值，
var(--size, 12px)可以，var(--size, small)在font-size上会失败 - 不要在
@keyframes里直接用var()控制动画数值，部分浏览器不支持（可用 CSS Houdini 替代）
