Design Token 是设计语言的产物，开发需要给予场景去选择对应的对接方式，以求更加精准的还原设计。
1. stylus 变量
$color_black_1000 = rgba(255, 255, 255, 1)
.card
background-color: $color_black_1000
其它 less,sass,css 变量同理
特点：
- 只能对接含有一个属性样式的 Token；
- 只能表示属性值，使用方需要写属性名；
- 可以直接简单的对接设计 Token 名称;
缺点：
- 和设计 Token 名称有依赖，设计改名是风险；
2. Stylus Mixin
.title
Typography(“h1", "bold")
.card
Theme("background-color", "red_1000")
其它 less,sass mixin 同理
特点：
- 可以对接含有多个样式的 Token;
- 使用方需要写属性名（可以缩写）；
- 可以表达设计 Token 排列组合的逻辑;
缺点：
- 和设计 Token 名称有依赖，设计改名是风险；
3. Vue Component
<template>
<Typography fontSize="h1" lineHeight="h1" fontFamily="number"/>
</template>
其它 react,svelt... 组件同理
特点：
- 可以对接一个样式，也可以对接多个样式，甚至可以控制 Dom 结构；
- 可以通过 npm 监控到用户使用情况；
- 使用方可以不需要额外创建属性名(但是需要在 class 名称上有体现);
- 有更好的代码提示；
- 代码可以 figma 生成；
缺点：
- 需要运行时执行，有性能风险（类似 CSS in JS）；
- 和设计 Token 名称有依赖，设计改名是风险；
- 组件本身的接口的变动，对业务方也是风险；
- 不能在非 Typography 组件上使用该样式；
4. Vue Function
<template>
<h1 :class="Typography(‘h1’, ‘bold’)" />
</template>
其它 react,svelt... function 同理
特点：
- 拥有 Vue component 所有的特点；
- 可以让使用方有更自由的对于 Dom 的操作能力;
缺点：
- 需要运行时执行，有性能风险（类似 CSS in JS）；
- 和设计 Token 名称有依赖，设计改名是风险；
- 组件本身的接口的变动，对业务方也是风险；
5. 语义化 Class
.c_color-always-black-1000
color: $color-always-black-1000
.bc_color-always-black-1000
background-color: $color-always-black-1000
.h1_label_bold
font-size: 24px
line-height: 38px
font-weight: 600
特点：
- 可以对接一个样式，也可以对接多个样式;
- 使用方可以不需要额外创建属性名(但是需要在 class 名称上有体现);
- 可以传达设计 Token 排列组合的逻辑;
缺点：
- 和设计 Token 名称有依赖，设计改名是风险；
- 会产生全局的 CSS 代码；
6. 原子化 Class
<h1 class="fontSize24 lineHeight38 fontWeight600"/>
<!-- 缩写形式 -->
<h1 class="fs24 lh38 fw600"/>
特点：
- 可以对接一个样式，也可以对接多个样式，也可以自由控制 Dom 结构；
- 和设计同学的 Token 命名没有了 依赖，设计同学 Token 改名对前端没有影响;
- 需要将属性名和属性值按照 key:value 定义在类名中;
- 代码可以 Figma 生成;
- 边界：只能创建设计 Token 中定义的样式;
缺点：
- 使用方需要知道 Token 与样式的排列组合规则（如果代码由插件生成则不需要）;
- 会产生全局的 CSS 代码（需要考虑管理问题）;
- 命名如果太长会增加 html，css的体积，以及使用者需要手打出完整名字（缩写可以解决这个问题）;
想要了解更多原子化 CSS：static-atomic-css
