用 CSS 变量搭一层设计 token

症状

拿到一个几千行的样式表，发现间距有 7px 9px 11px 13px 17px，字号有 12.5px 13.5px 14.5px 混着用。这种代码是能跑的，但没法维护 —— 每次调整都是全局搜索替换，而且永远会漏。

token 层长什么样

:root {
  /* 间距 8 档 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 字号 6 档 */
  --fs-1: 11px; --fs-2: 12.5px; --fs-3: 13.5px;
  --fs-4: 15px; --fs-5: 18px; --fs-6: 24px;

  /* 颜色按语义命名，不按色值命名 */
  --bg: #fdf3d9;
  --ink: #17143e;
  --accent: #ed2863;
  --line: rgb(23 21 79 / 26%);
}

组件里只允许写 var(--sp-3)，不许出现裸数字。这条规矩是 token 层能不能活下来的关键 —— 一旦允许例外，半年后就回到原点。

颜色按语义命名

不要写 --blue: #303fbd，要写 --accent 或 --link。因为改版时颜色会变，但"这是链接色"这个角色不变。按色值命名等于把当前实现写进了名字里。

明暗切换只需要换一层

html[data-theme="dark"] {
  --bg: #12121a;
  --ink: #e8e8f0;
}

所有组件一行不改。这是 token 化最直接的回报，也是检验 token 层是否做对的试金石 —— 如果切主题要改组件，说明有硬编码漏在外面。

一个容易忽略的点

var() 支持回退值：var(--accent, #ed2863)。在组件库里给关键 token 留回退，能让别人只引入组件、不引入 token 时也不至于渲染异常。