必须用:root声明css全局变量，因其是唯一被浏览器认可、覆盖整个文档树的全局作用域锚点，确保所有后代元素（含伪元素、svg）可继承，且在ssr、主题切换及跨框架场景中稳定可靠。
CSS 全局变量必须声明在 :root 选择器内才真正全局生效，其他写法（比如直接写在文件顶部、@import 后面、或没包在任何选择器里）都会被浏览器忽略。
为什么一定要用 :root 而不是 html
虽然 html 也能声明变量，但 :root 优先级更高，且语义更准确——它代表“文档根”，不局限于 HTML，还能兼容 SVG、XML 等上下文。更重要的是，:root 的样式规则会稳定覆盖 html 中同名变量，避免被第三方库意外冲掉。
-
:root是唯一能保证所有后代元素无条件继承的声明位置 - 如果在组件里零散写
--color-primary，后期改色就得 grep 整个项目，维护成本爆炸 - 别信“写在
body里也行”——body不是根，变量作用域只限于其子树，html或伪元素可能拿不到
:root 里变量声明的硬性语法要求
变量名必须以 -- 开头，且只能出现在合法 CSS 选择器内部；var() 引用时若变量未定义，会回退到默认值（如果有），否则直接失效。
- ❌ 错误写法：
--spacing-md: 16px;（没包在:root{}里 → 浏览器静默丢弃） - ❌ 错误写法：
@import 'tokens.css'; --color-brand: #007bff;（@import后直接写变量 → 无效） - ✅ 正确结构：
:root { --spacing-md: 16px; --color-brand: #007bff; } - 变量名大小写敏感：
var(--ColorBrand)≠var(--color-brand)
设计系统变量组织与主题切换的关键细节
主题切换不是靠 JS 动态改 :root 里的值，而是靠 CSS 层叠覆盖：先设默认值，再用 [data-theme="dark"] 或 @media (prefers-color-scheme: dark) 覆盖同一变量。
- 深色模式不要写两套独立变量（如
--color-bg-light和--color-bg-dark），而应统一用--color-bg，只在不同上下文里重赋值 - 避免循环引用：
--space-lg: calc(var(--space-md) * 2);没问题，但--space-md: calc(var(--space-lg) / 2);会导致计算失败 - 想支持 JS 动态主题？用
document.documentElement.style.setProperty('--color-bg', '#111')，别直接操作style属性 - 间距建议用
rem或em单位配合calc()构建弹性系统，比如--space-unit: 0.5rem;，然后--space-md: calc(var(--space-unit) * 4);
如何避免和 Less/Sass 变量混淆
Less 的 @primary-color 和 CSS 的 --primary-color 完全无关——前者编译时替换，后者运行时解析。混用时极易出错。
- 别在 Less 文件里写
color: var(--primary-color);却指望@primary-color自动同步过去 - 如果要用 Less 管理设计令牌，给变量加前缀（如
@ui-color-primary），再手动导出到:root块中 - 构建工具里用插件（如
postcss-custom-properties）或脚本生成:root变量，比手写更可靠 - 检查最终生成的 CSS：搜索
:root {，确认所有变量都在里面，且没有重复或拼写错误
真正难的不是写几行 :root，而是让团队所有人遵守同一套命名、分组、覆盖逻辑——变量一旦散落在各处，设计系统就只剩个空壳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
