使用 CSS 的设计系统

Source: Dev.to

快速概述

如果你打算在网站上使用设计系统，但不依赖任何流行的框架或库——仅使用纯 CSS——那么你来对地方了。

基础要素

• 颜色
• 排版
• 图标
• 间距
• 组件
• 模式 / 图片 / 徽标

你可以使用开源的设计系统来完成本练习。IBM 的 Carbon 就是一个设计精良且文档完善的系统。

设计令牌

设计令牌是设计系统的基石。它们是颜色、间距、排版等数值的唯一真实来源。概览请参见 Material Design Tokens 文档。

重要的是把所有内容都归入设计令牌的范围，并将例外和一次性使用的情况降到最低；否则你可能会陷入“设计系统的系统”之中。

在 CSS 中定义令牌

在 CSS 中，设计令牌通常以自定义属性（变量）的形式定义在 :root 伪类上：

:root {
  /* Colors */
  --color-bg: #FFF;
  --text-primary: #161616;
  --text-secondary: #525252;

  /* Typography */
  --font-family-heading: "Helvetica Neue", Arial, sans-serif;
  --font-weight-heading: 700;
  --font-size-heading-1: 2.5rem;
  --line-height-heading-1: 1.2;
  --letter-spacing-heading-1: 0.02em;

  /* Add other tokens (spacing, borders, etc.) here */
}

令牌定义后，它们就成为整个样式表中唯一允许使用的值。应避免硬编码数值，以确保设计系统保持一致。

应用令牌

在需要的地方引用这些自定义属性。例如，常见的标题样式可以这样写：

/* Common properties of headings */
h1, h2, h3, h4 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

/* Specific typography for h1 */
h1 {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  letter-spacing: var(--letter-spacing-heading-1);
}

同理，使用令牌为其他语义元素（a、img、p 等）设置默认样式。这种做法可以在不额外添加工具类的情况下，让大多数原子组件遵循设计系统。

结论

这些基础内容展示了如何使用纯 CSS 构建和使用设计系统。后续文章将深入探讨更高级的应用和最佳实践。

参考资料

• Carbon Design System – What is Carbon?
• Material Design – Design Tokens Overview