做前端时间久了，最常遇到的一个问题就是“改不动样式”：同一个颜色散落在十几个文件里，改了这边漏了那边；间距全凭感觉，页面越做越乱。后来我开始用 CSS 变量搭建一套“设计令牌”（Design Tokens），维护成本立刻降了下来。
什么是设计令牌
设计令牌，就是把设计里反复出现的值——颜色、字号、间距、圆角——抽象成带语义的名字，统一管理。比如不写 #2E5E4F，而是写 var(--accent)；不写 24px，而是写 var(--space-4)。
好处显而易见：想换主题色，只改一个变量；想让间距统一，只调一层定义。视觉的一致性，从源头就有了保障。
怎么组织
我习惯把令牌分成两层：
- 基础层：原始值，如色板、字阶、间距刻度，用
--c-*、--fs-*、--sp-*命名； - 语义层：用途值，如
--text-primary、--bg-surface、--radius-card，指向基础层。
页面里尽量只使用语义层，这样即使换肤、换主题，组件代码一行都不用动。
收益
半年实践下来，最大的收获是：改样式变成了一件有把握的事。深夜改 bug 时不再需要满项目找颜色，新同事接手也能快速理解设计规则。设计令牌不是炫技，它只是把“让视觉保持整洁”这件事，变成了工程上可维护的动作。