css变量需在:root声明、语义化命名、避免嵌套var()fallback，用html.theme-dark切换深色模式并配合transition实现平滑过渡，数值变量应绑定基础单位，工具类命名须明确方向。
CSS变量不是“写完就跑”的语法糖，而是运行时可变的活值——只有统一挂到 :root、语义化命名、避免硬编码 fallback，才能真正减少重复并规避重绘抖动。
为什么必须在 :root 声明全局变量
把 --color-primary 写在 .button 里，其他组件就用不了；写在 .card 里，子元素继承不到或被覆盖。浏览器按层叠顺序计算变量值，但变量本身不参与选择器优先级，!important 对它无效。
-
:root等价于html，作用域覆盖整页，天然适合做配置中心 - 所有组件、工具类、主题样式都应从这里读取，而不是各自声明一份
- 局部覆盖（如深色模式）应靠
html.theme-darkclass 切换，而非在组件内重定义
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中声明且有确定值 - PostCSS 插件（如
postcss-css-variables）构建时静态解析，跨@import的变量会报Error: Cannot resolve variable --text
间距/字号等数值类变量必须绑定基础单位
写一堆 .mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }，等于把重复从值挪到了类名上。后期调大基础单位，要改二十个地方。
- 在
:root定义--space-unit: 0.25rem;，工具类用calc(var(--space-unit) * 4)生成倍数 - 字号响应式不能靠媒体查询改
:root变量——:root是静态作用域，媒体查询里改它不触发重计算；推荐用clamp(14px, var(--font-size-base), 18px)配合变量 - 避免
rgba(var(--r), var(--g), var(--b), 0.8)这种写法，CSS 不支持在var()外拆通道；提前定义带透明度的变量，如--color-brand-weak: rgba(52, 152, 219, 0.8);
深色模式切换别用 @media (prefers-color-scheme: dark) 直接覆盖变量
媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片、按钮上，肉眼可见闪烁。
- 改用
html.theme-darkclass 切换：:root.theme-dark { --bg: #1e1e1e; --text: #eee; } - 配合
transition: background-color 0.2s实现平滑过渡（注意：CSS 变量本身不触发 transition，得映射到具体属性上） - 工具类命名要明确方向边界，比如用
mt-4而非m-4，避免团队协作时误用
最常被忽略的是变量名的语义层级——叫 --blue-500 还是 --color-brand，决定了换主题时是 grep 十几个文件，还是只改一行 :root 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
