css变量真能压体积的前提是同一值在≥2个无法共享类名的选择器中重复出现，如--spacing-md:12px用于按钮、卡片、表单项；单次使用或已有bem/原子类覆盖时定义变量反而增加体积。
CSS变量本身不压缩体积，真正起效的是用 var(--primary) 替代了 12 处重复的 background: #0d6efd —— 值只声明一次，引用多次，冗余文本被削掉了。
什么时候定义 CSS 变量才真能压体积？
关键看复用密度：同一值在 ≥2 个无法共享类名的选择器中重复出现时，变量才有价值。
- 适合场景：
--spacing-md: 12px被同时用在按钮内边距、卡片margin、表单项gap里 - 不适合场景：某个弹窗里唯一一次写
border: 1px solid #e9ecef，硬起个--modal-border，反而多出 28 字节（含空格和分号） - 注意 BEM 或原子类已覆盖的场景，再抽变量就是重复劳动——比如
.btn--primary和.card--primary已共用background，就没必要再套一层var(--bg-primary)
为什么滥用 CSS 变量反而让文件更大？
构建工具不会自动剔除未被 var() 引用的变量，它们照进打包产物，gzip 也救不了。
-
:root里堆满未使用的--color-xxx，比如tailwind.config.js扩展了 20 个色板但只用了 3 个 - 为每个组件单独定义作用域变量：
.card { --card-padding: 16px; }+.modal { --modal-padding: 24px; }，等于用变量复制了传统类名膨胀路径 - 变量名本身计入体积：
--sm看似短，但团队没人知道它指spacing还是screen，后期不得不加注释或重命名，实际更费字节
fallback 写法怎么影响最终体积？
var() 本身不增体积，但 fallback 写得啰嗦会抬高 gzip 压缩率。
- 优先用关键字：
color: var(--text, black)比color: var(--text, #333)少 2 字节；background: var(--bg, transparent)比#00000000更短更语义化 - 避免长字符串 fallback：
var(--shadow, 0 2px 4px rgba(0,0,0,0.1))→ 改成var(--shadow, 0 2px 4px #000)，gzip 后差 5–8 字节 - 别为 IE 加 fallback：
color: #333; color: var(--text)中第二行 IE 完全不解析，纯属占地方
最易被忽略的一点：变量不是“开箱即用”的压缩开关，它是你主动收敛重复值的工具——值没复用，变量就是累赘；命名不统一，后续维护成本反而更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
