必须在 :root 声明 css 变量以实现全局复用和统一管理，局部声明、错误 fallback、无单位数值、媒体查询直接改 :root 等做法均违背设计初衷，应通过 :root + class 切换、clamp()、显式单位、预定义带透明度变量等方式保障可靠性与可维护性。
直接在 :root 里定义变量，所有地方用 var(--xxx) 引用，改一处就全局生效——这是唯一真正减少重复的路径。其他方式（比如局部声明、硬编码 fallback、媒体查询里乱改作用域）只会让问题更隐蔽。
为什么必须在 :root 声明变量
变量不是“写在哪都能用”的值。:root 等价于 html 元素，作用域覆盖整页；写在 .button 或 .card 里，其他组件根本读不到，子元素也继承不到或被覆盖。浏览器按层叠顺序计算变量值，但变量本身不参与选择器优先级，!important 对它无效。
-
--color-primary写在:root，按钮、标题、表单全都能用 - 写在
.btn里，.header就无法复用，后期换主题得挨个 grep 替换 - 局部变量只适合极少数场景（如组件内动态控制），全局管理必须靠
:root
var() 的 fallback 写法错一个字符就失效
写成 color: var(--text-color, var(--fallback))，浏览器不会解析第二层 var()，最终渲染出字面量字符串 "var(--fallback)"，文字直接消失——控制台无报错，Computed 面板里却显示原样。
- 正确 fallback：先写兜底值，再覆盖为变量，例如
color: #333; color: var(--text-color, #333); - 如果依赖另一个变量（如
--text-color: var(--text-default)），确保--text-default已在:root中声明且有确定值 - 别用函数嵌套 fallback，CSS 不支持
数值类变量必须绑定基础单位
写一堆 .mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }，等于把重复从值挪到了类名上。后期调大基础单位，要改二十个地方。
- 在
:root定义--space-unit: 0.25rem;，工具类用calc(var(--space-unit) * 4)生成倍数 - 单位必须显式写出：
--size: 16px✅，--size: 16❌（calc(100% - var(--size))会失败） - 字号响应式别靠媒体查询改
:root变量——:root是静态作用域，媒体查询里改它不触发重计算；推荐用clamp(14px, var(--font-size-base), 18px)配合变量
深色模式切换别用 @media (prefers-color-scheme: dark) 直接覆盖变量
媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片、按钮上，肉眼可见闪烁。
- 改用
html.theme-darkclass 切换：:root.theme-dark { --bg: #1e1e1e; --text: #eee; } - 配合
transition: background-color 0.2s实现平滑过渡 - 避免
rgba(var(--r), var(--g), var(--b), 0.8)这种写法——CSS 不支持在var()外拆通道；提前定义带透明度的变量，如--color-brand-weak: rgba(52, 152, 219, 0.8);
最难的不是语法怎么写，而是让所有人养成「变量先行」的习惯：新增一个 padding，先查有没有现成 --space-xx；写新组件，第一行就声明它依赖哪些变量。否则机制再好，三个月后也会被新 PR 撕开一道口子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
