CSS 变量去重:让一份臃肿的主题文件重新干净

一个设计系统跑上一年半,:root 块往往会膨胀到失控。新页面要个稍微不一样的蓝,有人就加一行 --color-primary-2;另一个人没注意,又在另一个文件里把 --color-primary 重新声明成同样的色值。等你想统一品牌色的时候,翻开变量表才发现:同一个名字出现了三次,同一种颜色挂着四个名字。这就是自定义属性去重要解决的问题。

同名变量重复声明,到底谁生效

先说一个很多人忽略的规则。CSS 自定义属性遵循层叠,同一个作用域里同名变量后声明的覆盖先声明的。也就是说下面这段:

:root {
  --color-primary: #3b82f6;
  --spacing-md: 16px;
  --color-primary: #2563eb;
}

实际生效的 --color-primary 是 #2563eb,前面那行 #3b82f6 完全是死代码。它不报错,不警告,静静躺在文件里误导每一个读它的人。设计系统精简的第一步,就是把这类"被后者覆盖的前者"找出来。手动对着几百行 :root 数眼睛根本数不过来,这正是 CSS 变量去重工具 要做的活:它读出每一个自定义属性,合并去掉首尾空白后一致的名字,只保留首次出现的那行,并告诉你这个名字一共出现了几次。

同值不同名:更隐蔽的冗余

同名重复还算好查,真正拖垮主题文件的是同值不同名。--color-brand、--color-primary、--btn-bg 三个变量,色值全是 #2563eb。它们散落在不同的 token 文件里,谁也不知道彼此存在。去重时按规范化后的值聚合,这三行立刻并到一起,你才有机会决定保留哪一个、其余的指向它。

一个真实的去重例子

我手里有一份合并自三个分支的 token 导出,把它整段粘进工具,只勾选"去重"和"排序"。输入是这样:

--color-primary: #2563eb;
--color-brand:   #2563eb;
--color-primary: #2563EB;
--spacing-md: 16px;
--spacing-md: 16px;

输出按值规范化后聚合,带上重复次数和首次出现行号:

value          count  first_line
#2563eb        3      1
16px           2      4

五行塌成两行。--color-primary 那个大写的 #2563EB,去掉大小写差异后和小写是同一个值,被算进同一组;--spacing-md 声明了两次,完全相同,只留一行。最关键的是 count 和 first_line 都留着,我能回到原文确认这些重复分别来自哪个文件,而不是闭眼删掉一行就完事。

我自己清理一次的体会

上个月合并主题文件,我原本打算靠编辑器全局搜索一个个名字数。搜了二十分钟,--color- 开头的变量列出来一长串,根本分不清哪些是真用着、哪些是历史遗留。后来改成全部粘进去重工具,按值聚合一跑,十几组同值不同名当场暴露。我把保留的规范名抄进一份新表,其余的全改成 var() 引用主名。整个 :root 从两百多行压到八十行,改色时再也不用担心漏改某个别名。这种活,人眼盯着数纯属浪费时间,交给解析器一秒钟的事。

几个容易踩的坑

从网页或聊天记录复制来的变量,经常夹着看不见的空白和零宽字符,去重前最好先规范化,不然 --color-primary 和 --color-primary 会被当成两个名字。如果你的清单还混着十六进制色值想单独拎出来核对,可以接着用 十六进制颜色提取 把色值单独抓出来比对。需要留审计线索时,别只复制最终列表,导出带行号的 CSV 或 Markdown,以后有人质疑某个变量为什么被删,你拿得出证据。

去重不是为了把文件改短好看,而是让设计系统回到"一个意图对应一个变量"的状态。同名重复声明的死代码、同值不同名的别名冗余,都是日积月累攒下来的,清一次,后面每次改主题都省一截。全程在浏览器本地完成,token 文件不出你这台机器,放心粘。

---

Made by Toolora · Updated 2026-06-13