直接答案:25 站中 11 站使用 CSS 自定义属性,共 548 个变量名、856 次 var() 引用;0 站在采样 CSS 里出现 prefers-color-scheme 或 color-scheme;1,159 个 @media 显示响应式仍以断点为主。E24 用 40 个变量完成 511 次引用,而 E25 声明 17 个变量却一次未用;E23 是 83 个变量、79 次引用。14 站完全没有 CSS 变量。

本文只读 CSS 文本,不执行脚本;用 JS 切换 class 的暗色模式不在统计内。

11
使用变量站点
548
变量声明
856
var() 引用
0
暗色模式站点
1,159
@media
14
无变量站点

方法:HTML 内联样式 + 前 3 个外链 CSS

2026-11-09 12:41–12:45,对第 4 期 25 个缓存 200 首页实时请求 HTML,读取内联 <style> 与前 3 个外链 CSS;去掉注释后统计自定义属性声明(按名称去重)、var(--…) 引用、prefers-color-scheme、color-scheme 与 @media 数量。只读 CSS,不渲染。

口径判定边界
变量声明--name:,同名只计一次不判断是否被引用
var() 引用var(--…) 出现次数不解析回退值
暗色模式prefers-color-scheme 或 color-schemeJS class 切换不计
@media所有 @media 块不区分尺寸、打印或偏好

结果:变量有了,暗色模式没有

指标数量站点数
使用 CSS 变量的站点—11
变量声明(按站去重后合计)54811
var() 引用85611
声明了变量但 0 次引用171
prefers-color-scheme / color-scheme00
@media1,15924
站点变量var() 引用@media
E244051173
E23837987
E03735596
E06695553
E09734571
E147345116
E22734699
E17274207
E1215414
E085120
E251705

变量的使用深度差别很大:E24 一个站就有 511 次引用,说明颜色与间距已收进变量层;E25 的 17 个变量一次未用,更像复制模板后留下的空壳。E17 有 207 个媒体查询,却只声明 27 个变量、引用 4 次,响应式主要靠逐条断点,而不是令牌。

暗色模式则是空白:25 站没有一处 prefers-color-scheme 或 color-scheme。这不等于所有站都没有暗色皮肤——可能由 JS 切 class 或未采样的样式表实现——但在 CSS 偏好层没有任何声明,意味着“跟随系统”这一最省事的路径没有被使用。

对验收的启示

  1. 先建最小令牌层。 至少覆盖品牌色、正文色、背景、间距与字号;11/25 站已有,14 站完全没有。
  2. 把暗色模式写进 CSS。 0 站使用 prefers-color-scheme;优先做系统跟随,再加手动切换。
  3. 清理死变量。 E25 声明 17 个、引用 0 次;死令牌会让主题层看起来完整,实际没有生效。
  4. 暗色下测对比度。 变量存在不代表对比度达标;切到暗色逐页检查正文、按钮、图片与表单。
  5. 断点与色彩偏好分开验收。 1,159 个 @media 说明响应式有投入,但颜色偏好是另一张清单。企业官网验收可参考网站建设服务。

局限

  • 只取前 3 个外链 CSS:变量与暗色规则可能在未采样的样式表中,总数是下限。
  • 不执行 JS:用脚本切换主题、动态注入 CSS 变量的实现看不到。
  • 变量按名称去重:同名不同值的覆盖关系未解析。
  • 边界:E17 只有 1 个外链 CSS,E18/E20 未取到,E25 全部为内联样式。
  • 25 站 pilot:同一批装备企业样本,不外推行业。

数据与复算

匿名数据:equipment-homepage-design-tokens-2026.csv(25 行 × 10 列:CSS 文件/体积、变量、var() 引用、暗色查询、@media 与时间)。仓库内为 docs/research/2026-11-homepage-design-tokens.csv。

解析:scripts/design_token_probe.py;单元测试 scripts/test_content_design_token_probe.py(6 项,无网络)。运行:

python -m unittest scripts.test_content_design_token_probe

配套:首页动效审计、首页模板卫生审计、首页焦点样式复测。

数据来源与口径

  1. 样本:第 4 期 25 个缓存为 200 的首页。
  2. 抓取:2026-11-09 12:41–12:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
  3. 样式:内联 <style> + 前 3 个外链 CSS;去注释后计数。
  4. 口径:变量按名称去重;暗色模式查 prefers-color-scheme 与 color-scheme;@media 全量计数。

常见问题

0 站支持暗色模式,等于都没有吗?

不能这样下结论。本文只查 CSS 里的 prefers-color-scheme 与 color-scheme;用 JS 切 class 或放在未采样的样式表里都看不到。

CSS 变量越多越好吗?

不是。要看引用率:E25 声明 17 个变量却 0 次使用,E24 是 40 个变量、511 次引用,后者才真正形成了主题层。

CSS 变量带来什么?

把品牌色、间距、字号收在一处,换主题或做暗色模式时不用逐条覆盖;也让 !important 的需求下降。

为什么媒体查询这么多?

25 站共 1,159 个 @media,响应式布局仍主要靠断点;但颜色偏好没有跟上,暗色模式几乎缺席。

暗色模式怎么验收?

在系统里切到暗色,逐页检查背景、文字、图片、表单与图标的对比度,并确认手动切换可用,而不是只看变量是否存在。

数据能复核吗?

可以。公开 CSV 25 行 × 10 列;scripts/design_token_probe.py 有 6 项离线单测。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文只统计首页 CSS 中的变量与色彩偏好声明,不执行脚本、不渲染;11 站使用变量,属 pilot,不外推行业。

主题要能一处改

变量是主题的地基,暗色模式是地基上的第一间房;两者都缺席时,换色只能靠 !important 逐条覆盖。

预约内容验收方案