类与令牌

设计令牌和类能把一页零散的样式变成一套设计系统。令牌保存数值，类保存规则，局部样式处理例外情况。

设计令牌

打开检查器的 Tokens 标签页，编辑站点的颜色、字体和间距。每个令牌都会变成一个 CSS 变量，样式字段中会显示令牌标签，你可以直接选择令牌，而不必填写原始数值。

:root {
  --color-brand: #fe5900;
  --font-heading: Inter;
  --space-md: 16px;
}

• 重命名令牌时，页面、组件、类和其他令牌中对它的所有引用都会被改写。这只占一步撤销。
• 删除正在使用的令牌时，Malla 会告诉你有多少处在使用它，然后把每处引用替换为令牌的值，因此不会有任何元素丢失样式。

字体

字体令牌可以选择一种 Google 字体以及你需要的字重。已发布的站点只加载这些字重，并使用 font-display: swap。

类

类是一组有名字、可复用的样式，拥有自己的断点和状态。检查器分区上方的类栏列出选中元素上的类。输入名称即可添加已有的类，或创建一个新类。

1. 创建类

   选中一个元素，在类栏中输入名称（例如 card），然后按 Enter。

2. 为类设置样式

   确认样式目标是这个类，而不是局部样式，然后再编辑。所有带有 card 的元素都会更新。

3. 复用类

   把 card 添加到其他元素上。局部样式只用于真正一次性的情况。

组合类

给已经有一个类的元素再添加第二个类，就得到一个组合类：在父类基础上做出的变体。它会编译为更具体的选择器，因此能可靠地覆盖基础类，又不影响该类的其他用处。

.btn { padding: 12px 20px; background: var(--color-brand); }
.btn:hover { opacity: .9; }
.btn.btn-ghost { background: transparent; }   /* combo class */

最佳实践

• 把颜色、字体和间距放进令牌；在类中引用令牌。
• 按用途给类命名（card、heading-xl），而不是按外观命名（orange-box）。
• 用组合类做变体（btn + btn-ghost），用组件做重复的结构。
• 未使用的类会自动从发布的 CSS 中剔除。