工程落地

前四章是"设计判断",这一章是"工程纪律"。判断再好,若每个颜色都写死 hex、每个动画都掉帧、每个组件只画了默认态,落地就会塌。本章给三条纪律。

5.1Design tokens:三层间接

把设计值组织成三层——primitive(具体值)→ semantic(表达意图)→ component(局部覆盖);中间这层间接,让换主题、做暗色、改品牌只动一处。

底层机制(比文档深一层):三层各司其职。primitive / global 是原料盘(--blue-500: oklch(...)、--space-4: 16px),只命名"是什么",不含用途。semantic / alias 表达意图(--color-primary、--color-text-muted、--surface),指向某个 primitive。component 是局部覆盖(--button-bg 指向 --color-primary),只在组件需要偏离全局时才加。换皮肤 / 暗色模式只重绑 semantic 那一层(02 章暗色已演示),换品牌色只改 primitive,组件代码一行不动。CSS 自定义属性是它们的运行时载体——可被媒体查询、data-theme 属性、JS 动态切换。

:root {
  /* ① primitive：原料，只说"是什么" */
  --blue-500: oklch(0.62 0.19 255);
  --gray-700: oklch(0.28 0.01 255);
  --space-4: 16px;

  /* ② semantic：意图，指向 primitive */
  --color-primary: var(--blue-500);
  --color-text:    var(--gray-700);
  --pad-card:      var(--space-4);
}
.button {            /* ③ component：用语义名，不碰具体值 */
  background: var(--color-primary);
  padding: var(--pad-card);
}

与下一节的关系:token 是"值怎么存";"样式写在哪"是另一个选择——写在标记上,还是收在类里。

5.2原子化 vs 语义化 CSS

原子化(Tailwind:class="px-4 text-sm")把样式直接写在标记上;语义化(.card { … })把样式收进命名类。真实权衡是"就近、约束尺度、无命名负担"对"标记冗长、复用靠组件"。

底层机制(比文档深一层):Tailwind 的价值常被简化成"写得快",真正的关键在于——它把间距 / 字阶 / 色阶做成了一套强制的 token 集合:你只能写 p-4(取自阶),很难写 p-[7px](随手值需要特意逃逸)。这从工具层面堵死了 §4.1 说的"随手填像素",让一致性变成默认而非自律。代价是标记变长、跨元素复用要靠抽组件(而非共享 CSS 类)。语义化 CSS 反过来:标记干净、复用直接,但需要自己命名、自己守纪律,容易在大团队里漂移。两者不是对错,是匹配场景。

与下一节的关系:无论样式写在哪,动起来卡不卡,取决于一个更底层的东西——浏览器怎么把 CSS 变成像素。

5.3动效与渲染管线:为什么有的动画卡

浏览器渲染分四阶段 style → layout → paint → composite;只改 transform 和 opacity 的动画只触发最后一步(GPU 合成),所以顺滑;改 width / top / margin 会从 layout 重跑,所以卡。

底层机制(比文档深一层):浏览器每一帧最多约 16.7ms(60fps)。把 CSS 变成屏幕像素要经过四步:① Style(算出每个元素的最终样式)→ ② Layout(算几何:位置、尺寸——又叫重排 reflow)→ ③ Paint(把像素画到图层)→ ④ Composite(把各图层在 GPU 上合成)。关键:你改动的属性,决定从哪一步开始重跑。

• 改 width / height / top / left / margin → 从 Layout 开始全跑(重排会波及其它元素),每帧重排 = 掉帧。
• 改 color / background / box-shadow → 跳过 Layout,从 Paint 开始,较省但仍占主线程。
• 改 transform / opacity → 跳过 Layout 和 Paint,只在合成线程做 Composite(GPU),主线程不阻塞 → 稳定 60fps。

所以铁律:位移用 transform: translate() 而非 left;缩放用 transform: scale() 而非 width;显隐用 opacity 而非 display / height。 will-change 可提示浏览器提前为元素提层,但滥用反而吃内存,只在确有需要时加。

/* ✗ 卡：动 left 每帧触发 Layout 重排 */
.menu-bad { transition: left 200ms; }      /* left: -300px → 0 */

/* ✓ 顺：动 transform 只触发 Composite（GPU） */
.menu-good { transition: transform 200ms ease-out; } /* translateX(-300px) → 0 */

/* 进入用 ease-out（快进慢停，跟手）；尊重用户的减弱动画设置 */
@media (prefers-reduced-motion: reduce) {
  .menu-good { transition: none; }
}

时长与缓动

UI 微交互的时长落在 150–300ms:短于 ~100ms 感知不到、形同瞬变,长于 ~400ms 拖沓挡手。缓动(easing)表达"运动的性格":元素进入用 ease-out(开头快、结尾慢,跟手且利落),退出用 ease-in;需要弹性时用 spring / 自定义 cubic-bezier。

与下一节的关系:动效是单个元素的事;把这些元素攒成可复用的组件时,真正的工作量藏在一个容易被跳过的地方——状态。

5.4组件 API:工作量在状态

设计一个组件,大部分工作不是默认长相,而是它的各种状态:hover / focus / active / disabled / loading / error / empty。

底层机制(比文档深一层):新手把"做一个按钮"理解成"画一个按钮样子",于是只做了默认态。真实的按钮是七种态的集合,缺一种,用户就会撞到"点了没反应 / 不知道能不能点 / 提交时狂点"这类问题。组件的三个设计轴:variant(primary / secondary / ghost——这是 01 章主次对比的制度化)、size(sm / md / lg,取自字阶与间距阶)、state(上述七态)。其中 :focus-visible 对键盘可达性是硬要求(回扣 02 章无障碍):它只在键盘聚焦时显示焦点环,鼠标点击不显示,兼顾美观与可达。

右边把同一个主按钮的几种态都做了:hover 加深(明度,02 章)、disabled 降对比并改光标、loading 给反馈。这才是一个"能上线"的按钮。一套设计系统的体量,很大程度就是组件数 × 状态数。

5.5收束:落地顺序

1. token 先行:把 02–04 的色阶 / 字阶 / 间距阶写成三层 token,组件只引用语义名。
2. 选 CSS 方案:要强制尺度 + 快迭代 → 原子化;稳定设计语言 + 手写页 → 语义化。两者都吃同一套 token。
3. 动画只碰合成属性:位移 / 缩放用 transform,显隐用 opacity;时长 150–300ms,进入 ease-out;尊重 reduce-motion。
4. 组件按状态设计:variant × size × state 三轴,七种态一个都不少,焦点用 :focus-visible。

到这里,设计判断(01–04)已经全部沉淀成可维护、可复用、不卡顿的代码。最后一章把视角拉高:当组件多到几十上百个,如何在规模上保持一致,又如何在当下保持不土。