css变量通过复用值减少重复声明来压缩体积，仅当同一值在≥2个无法共享类名的选择器中出现时才有效；滥用未使用变量或为单次使用定义变量反而增大体积。
CSS 变量本身不直接“减小体积”，真正起效的是你用它替代了大量重复的、值相同的类名定义——比如把 12 个组件里各自写的 background: #0d6efd，统一换成 var(--primary)，CSS 文件里就只存一次声明，而不是 12 次。
什么时候用 CSS 变量真能压体积
关键看复用密度：同一组值（颜色、间距、圆角、阴影）在 ≥2 个独立选择器中重复出现，且这些选择器无法通过原子类或 BEM 共享类名时，变量才有压缩价值。
- 适合场景：
--spacing-md: 12px被用在按钮内边距、卡片间距、表单项间隙里 - 不适合场景：某个弹窗里唯一一次用到
border: 1px solid #e9ecef，硬起个--modal-border反而多出 28 字节（含空格和分号） - 注意 fallback 写法：
color: var(--text, #333)比color: var(--text, #333333)少 2 字节；background: var(--bg, transparent)比写#00000000更短更语义化
为什么变量滥用反而增大体积
常见错误是把所有可变属性都抽成变量，尤其在 :root 里堆满未使用的声明。构建工具不会自动剔除未被 var() 引用的变量——它们照进打包产物，gzip 也救不了。
- 典型现象：tailwind.config.js 开启
theme.extend.colors加了 20 个色板，但项目只用了其中 3 个，:root仍输出全部 20 条--color-xxx - 危险操作：为每个组件单独定义作用域变量，如
.card { --card-padding: 16px; }+.modal { --modal-padding: 24px; }，等于用变量复制了传统类名膨胀路径 - 兼容性陷阱：为 IE 写 fallback（如
color: #333; color: var(--text)）纯属冗余——IE 不支持var()，第二行完全无效，白占体积
对比 Atomic CSS 和 BEM，变量在哪一环起作用
CSS 变量不是替代方案，而是补位工具：Atomic CSS 管类名粒度，BEM 管选择器结构，变量管值复用。三者叠加时，变量应在最后一步收敛“动态值”。
- Atomic 场景：用
bg-[#0d6efd]是反模式；应配bg-primary，再让--primary: #0d6efd在主题层统一控制 - BEM 场景：避免
.button--size-large { font-size: 18px; }+.card--size-large { font-size: 18px; }这种重复，改用--font-size-lg: 18px统一注入 - Linaria 等 CSS-in-JS 工具中，变量必须限制在组件作用域（如
styled.div`--bg: ${props => props.bg}; background: var(--bg);`），否则会泄漏到全局，破坏 tree-shaking
最易被忽略的一点：变量名长度本身计入体积。写 --sm 看似省字节，但团队协作中没人知道它指 spacing、shadow 还是 screen；而 --spacing-sm 多 7 字节，却换来可维护性和构建工具准确识别——这 7 字节 gzip 后实际只增 1–2 字节，远低于因命名模糊导致的误删/误加规则成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
