CSS变量需按复用≥2次原则定义，语义化命名，精简fallback，避免主题切换导致体积膨胀，并手动清理未使用变量。
用 -- 前缀定义变量，但别在 :root 里堆满全局变量
CSS 变量不是“多写几个 --color-primary 就能自动瘦身”的魔法开关。真有效果的前提是：你得把那些反复出现、且值稳定的样式片段抽出来——比如按钮的边框圆角、卡片的阴影强度、文字行高比例。
常见错误是把所有颜色/尺寸都塞进 :root，结果变量本身成了冗余负担：没被用到的变量照样进打包体积，还拖慢 CSS 解析速度。
- 只在真正复用 ≥ 2 次的地方定义变量，例如
--spacing-xs: 4px被用在按钮内边距和图标间距里 - 避免给单次使用的值起变量名，比如某个模块里只出现一次的
background: #f0f9ff，硬起个--bg-light-blue反而增加体积 - 变量名尽量语义化但不过度抽象，
--border-radius-sm比--r1更易维护，也比--card-corner-radius更通用
用 var() 替换重复值时，注意 fallback 的写法成本
var() 本身不增大体积，但写法不当会悄悄抬高 gzip 压缩率——尤其是 fallback 值写得太长或太具体。
比如 color: var(--text-primary, #333) 和 color: var(--text-primary, black)，后者更短，且语义等价（black 在绝大多数场景下就是 #000，视觉无差别）。
立即学习“前端免费学习笔记（深入）”；
- fallback 值优先用关键字（
transparent、currentColor、auto），其次用短十六进制（#000优于#000000） - 避免 fallback 写成完整函数，例如
var(--shadow, 0 2px 4px rgba(0,0,0,0.1))→ 改成var(--shadow, 0 2px 4px #000)，gzip 后差 5–8 字节，积少成多 - 不要为兼容 IE 而加多余 fallback：IE 根本不支持
var()，写了也白写，纯属占地方
慎用 CSS 变量做“动态主题切换”，它可能让体积翻倍
如果项目需要深色/浅色主题，并用 JS 切换 data-theme="dark" + 大量 [data-theme="dark"] .btn { --color: #fff } 规则，那 CSS 文件体积很可能比写两套独立类名还大。
因为每条主题规则都要带选择器前缀，而变量声明 + 主题覆盖规则的组合，会让相同属性重复多次（比如 --color-bg 在 :root 和 [data-theme] 里各定义一次）。
- 主题简单时（仅背景/文字色），直接用
@media (prefers-color-scheme: dark)更轻量 - 必须 JS 控制主题？考虑只用变量控制“可变部分”，把布局、字体、间距等稳定属性保留在普通规则里
- 构建时能分离主题 CSS 的话（如 PostCSS 插件），比运行时靠
var()切换更省体积
压缩工具对 CSS 变量的处理有限，手动清理更可靠
大多数 CSS 压缩器（如 cssnano）不会合并相同值的变量声明，也不会删掉未引用的 var() —— 它们只管语法层面的空格、分号、注释。
这意味着：你删掉一个组件，忘了删它定义的 --xxx 变量，那个变量就永远躺在 CSS 里；或者两个变量值一样（--gap: 16px 和 --spacing-md: 16px），工具也不会帮你合并。
- 定期用 VS Code 插件（如 “TODO Tree” 配合搜索
--）人工扫一遍未使用的变量 - 构建流程中加一步检查：用
postcss-values-parser或自写脚本统计每个变量的实际引用次数 - 变量命名带上作用域前缀（如
--button-padding-x），比泛泛的--pad-x更容易判断是否过期
变量不是越少越好，也不是越多越好；关键在“被谁用、用几次、改起来疼不疼”。文件体积降不下来，往往不是没用变量，而是变量和使用点之间断了链路。
