收集 CSS 设计变量并不是出于设计驱动的突发奇想，也不是为了美观而美观。这是一种工程实践，旨在标准化视觉决策并降低前端运营成本。
在本文中，我们将介绍：
- CSS 设计变量与收集原始值的区别
- 项目中常见的值
- 清点能够发现哪些问题
- 为什么在审计中自动化收集过程
CSS 设计变量在实践中意味着什么
设计变量（design token）为设计决策赋予名称，例如某种颜色或间距。收集重复的 CSS 值可以帮助寻找候选，但重复本身不代表它已经是设计变量。可清点的值包括：
- 颜色（
#0d6efd,rgb(13,110,253)） - 字体大小（
14px,1rem） - 行高
- 间距（
8px,16px,24px） - 圆角半径
- 阴影、z-index 值等
下面是一个电商场景的说明性示例：
.button-primary {
background: #005bff;
border-radius: 6px;
}
.checkout-button {
background-color: #005bff;
border-radius: 8px;
}
两个按钮的背景色相同，但圆角半径不同。合并这些值之前，应先确认这种差异是否出于设计意图。
设计变量清点揭示的典型问题
1. 虚假多样性
假设一次教学示例中的 SaaS 审计发现：
- 27 种独特的蓝色
- 其中 19 个相差 1-3 个 RGB 单位
这是以下情况的典型症状：
- 从 Figma 手动复制粘贴；
- 团队之间没有共同的设计约定；
- 积累的技术债务。
2. 没有系统的间距
管理界面示例：
margin-bottom: 12px;
margin-bottom: 14px;
margin-bottom: 16px;
margin-bottom: 18px;
问题不是“哪个间距是正确的”。 真正的问题是 为什么有四个。
收集设计变量可以让您：
- 展示各个值的分布；
- 找到相似值的分组；
- 选择适合的尺度，例如 4 点或 8 点网格。
3. 版式漂移
另一个说明性示例是企业门户，其中使用了：
- 11 种字体大小
- 7 个行高值
- 正文文本有 5 种粗细
按用途分组后，可能发现只需要三种文字样式角色。合并其他值之前，要先确认它们的实际用途。
CSS 设计变量收集在技术上是如何工作的
从机械层面来看，该过程很简单：
- 加载页面。
- 收集所有 CSS（内联和外部）。
- 解析声明。
- 按类别汇总值：
- 颜色
- 字体大小
- 间距
- 圆角半径
- 计算频率。
JSON 输出示例：
{
"colors": {
"#005bff": 143,
"#ffffff": 98,
"#f5f7fa": 34
},
"spacing": {
"8px": 76,
"16px": 112,
"24px": 41
}
}
这些统计为调查提供依据，但频率本身不能决定某个值的含义或修改优先级。
为什么手动方法无法扩展
项目早期，团队可以口头约定规则。但当出现以下情况时，
- 5+开发人员；
- 并行特征分支；
- 多种设计来源；
仅靠口头约定会变得难以维护。
如果没有自动设计变量收集，您：
- 缺乏对现实的可靠认识；
- 无法衡量重构的影响；
- 失去对回归的控制。
说明性场景：不停止开发，逐步整理设计
假设一个营销网站约有 120 个页面。以下数值用于说明一种可能的迁移过程，并非经验证的客户成果或效果预测：
之前：
- 4,000 多个 CSS 规则
- 32种颜色
- 19 种字体大小
采取的步骤：
- 收集主要页面中的值。
- 按出现频率排序。
- 定义核心设计变量。
- 逐步迁移，而不是完全重写。
之后：
- 9 种基本颜色
- 6 个文字样式变量
- CSS 大小减少 18%
- A/B 测试中的视觉回归减少
性能提升的来源
CSS 设计变量不仅仅与设计有关：
- 合并重复声明可能减小 CSS；
- 共用值有助于维护；
- 简化规则可能减少层叠冲突；
- 对 gzip/Brotli、覆盖率和关键 CSS 的影响需要实际测量。
仅收集设计变量不会让页面变快。应在实际修改代码后，比较传输量和加载时间。
为什么我们将此视为审计问题
在 milten.io，CSS 值清点用于：
- 诊断，不是一个“漂亮的报告”生成器；
- 一种在看似不存在的地方暴露结构的方法；
- 标准化、设计系统和可扩展前端架构的入口点。
如果候选值难以整理成设计变量，应检查设计规则与例外。这种困难本身并不能证明设计系统不存在。
总结
简化为管理逻辑：
- 没有设计变量的 CSS = 非托管资产
- 设计变量清点=库存
- 频率=优先级
- 自动化=可扩展性
你可以忽略这一点。但每次重新设计都会从以下开始： “让我们仔细调整一下样式” — 并以另一层混乱结束。
清点项目中实际使用的值，选择有依据的修改，并测量效果。
