最有效起点是直接在 :root 定义语义化 css 变量并用 var() 引入；必须写在 :root 才真正全局可用；fallback 必须是静态值；数值变量需带单位；推荐用 calc() 和 clamp() 实现可维护的间距与响应式；命名应语义化而非外观化。
直接在 :root 里定义语义化变量，然后用 var() 引入——这是最简单也最有效的起点，不用预处理器、不增加构建步骤，改一处全项目同步更新。
必须把变量写在 :root 里才真正全局可用
CSS 变量的作用域靠继承，不是靠“声明位置靠前”。写在 .button 或 .card 选择器里，其他组件根本读不到；写在 body 里，html 根节点下的某些元素（比如 dialog）可能不继承。只有 :root 等价于 html 元素，天然覆盖整页，是唯一靠谱的全局挂载点。
-
:root是浏览器默认作用域，所有组件、工具类、主题样式都应从这里取值 - 避免在组件内部重复声明同名变量（如
.dark-card { --bg: #111; }），会污染局部继承链，且下游无法统一控制 - 局部覆盖推荐用类名切换：比如
html.theme-dark { --bg: #1e1e1e; }，而不是在每个深色组件里重设
var() 的 fallback 写法错一个字符就失效
很多人写 color: var(--text-color, #333); 没问题，但一换成 color: var(--text-color, var(--fallback)); 就出事——浏览器不会解析第二层 var()，直接当字符串渲染，文字消失，控制台还不报错。
- fallback 必须是静态值：
var(--color, #000)✅，var(--color, var(--fallback))❌ - 如果真要兜底到另一个变量，得提前确保它已在
:root中声明并有确定值，例如：--text-default: #333; --text-color: var(--text-default); - 数值类变量别漏单位：
--space-md: 16px;，不能只写16，否则var(--space-md)在margin里会无效
用 calc() 处理倍数和响应式，别硬编码工具类
写二十个 .mt-1 到 .mt-8 类，等于把重复从值挪到了类名上。后期调基础间距，要改二十处，还容易漏。
- 在
:root定义基础单位：--space-unit: 4px; - 工具类用计算：
.mt-4 { margin-top: calc(var(--space-unit) * 4); } - 字号响应式别靠媒体查询改
:root变量——它不触发重计算；改用font-size: clamp(14px, var(--font-size-base), 18px);
最容易被忽略的是变量命名本身：用 --brand-primary 而不是 --blue-500，用 --spacing-md 而不是 --m2。名字一旦绑定外观，换设计系统那天，你得重翻几百行 CSS 手动替换，而语义名只需改一行声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
