css变量必须定义在:root才能全局复用，因只有:root是文档根节点，确保所有页面和组件继承同一份定义；引用时必须带fallback（如var(--color-text, #333)）防渲染失效；命名需语义化（如--color-primary）并统一前缀。
CSS变量必须定义在 :root，否则跨页面复用会失效。 你改了一个颜色却只在首页生效，其他页面还是旧值——大概率是变量写在了某个页面级 .page-home 选择器里，而不是全局根节点上。
为什么一定要写在 :root 而不是某个 class 或组件里
写在 .theme-dark 或 .app-header 这类选择器下，变量只在该元素及其后代生效。一旦另一个页面的 .button 组件没被这个 class 包裹，var(--color-primary) 就会 fallback 到浏览器默认值或继承值，结果就是按钮突然变黑/变透明。
只有挂到 :root（等价于 html 元素），才能保证所有页面、所有组件都能读取到同一份定义。它不是“建议”，是作用域机制决定的硬性要求。
-
:root是唯一能被全文档所有元素继承的声明位置 - 写在
body或某个 wrapper div 里，子页面若没引入该 HTML 结构，变量就不可见 - 框架中（如 React/Vue）组件样式隔离后，局部变量更难穿透，必须靠
:root打底
var() 必须带 fallback，否则旧环境或 JS 失败时直接丢色
不写 fallback 的 var(--color-text) 在 IE、部分安卓 WebView 或 JS 动态设置失败时，会解析为 transparent 或继承值，文字消失、背景变白，控制台还不报错。
正确写法是始终补上字面量回退值：color: var(--color-text, #333);。这不是兼容性“锦上添花”，而是防止线上样式断裂的底线。
- fallback 只能是确定值（
#333、red、16px），不能嵌套var(--fallback) - 多个主题共存时，每个
var()都得有 fallback，哪怕深色模式下也一样 - DevTools 里 computed 值显示为
var(--color-text)原样字符串？八成是 fallback 缺失或变量名拼错
命名必须语义化，禁用裸名和设计系统残留名
用 --blue-500 或 --c1 这类名，上线后根本没法 grep，交接时没人知道这色用在哪、能不能动。换主题时还得翻 Figma 对照，维护成本反而更高。
按用途命名：--color-primary、--color-surface-card、--color-state-hover。一眼可知角色，也方便批量替换。
- 全局变量统一加
--color-、--spacing-等前缀，避免冲突 - 组件专属变量（如
--card-padding）可限制在组件作用域内：.card { --card-padding: 16px; } - 禁止在不同地方重复声明同名变量，比如
.button { --color-primary: red; }—— 这会覆盖根变量，且兄弟组件无法复用
真正麻烦的不是写几行 :root，而是变量声明分散、命名随意、fallback 缺失、作用域误用——这些细节一漏，多页面颜色管理就退回“全局搜索替换”的原始状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
