template模板

Daotin 于 2025-03-04 发布 编辑
  1. CSS Token
  2. CSS 变量（CSS variables）
  3. 使用场景和方法
    1. CSS Token 的使用场景
    2. CSS 变量的使用场景
    3. 实际应用方法

CSS token 和 CSS 变量（CSS variables）是相关但不完全相同的概念。让我来详细解释一下：

CSS Token

CSS token 是一种设计系统中的概念，代表的是 UI 设计中的基本单元，比如颜色、间距、字体大小等。这些基本单元被命名和组织成一个集合，以保证设计的一致性。

CSS token 通常被实现为 CSS 变量，但它们更多的是一种设计概念和架构方法，而不仅仅是技术实现。

CSS 变量（CSS variables）

CSS 变量是 CSS 的一个特性，允许你在 CSS 中声明变量，然后在整个样式表中重复使用这些变量。

它们的语法是：

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

使用场景和方法

CSS Token 的使用场景

  1. 设计系统：构建一个统一的设计语言，确保整个产品的视觉一致性
  2. 主题切换：定义不同主题的颜色、间距等属性
  3. 响应式设计：为不同设备定义不同的尺寸规则

CSS 变量的使用场景

  1. 减少重复代码：避免在多处重复编写相同的值
  2. 简化维护：只需更改一处即可影响所有使用该变量的地方
  3. 实现动态效果：通过 JavaScript 修改 CSS 变量来实现动态样式

实际应用方法

一个常见的实践是基于 token 创建 CSS 变量层级：

/* 设计 token */
:root {
  /* 颜色 */
  --color-brand-primary: #007bff;
  --color-brand-secondary: #6c757d;
  --color-neutral-100: #ffffff;
  --color-neutral-900: #212529;
  
  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* 字体大小 */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  
  /* 圆角 */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
}

/* 使用 token 创建组件样式 */
.button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-100);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-md);
}

.card {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: 0 var(--spacing-xs) var(--spacing-md) rgba(0, 0, 0, 0.1);
}

这种方法的优势是：

  1. 可维护性：只需修改 token 值即可更新整个应用的外观
  2. 一致性：确保整个应用使用相同的设计值
  3. 主题切换：通过更改根级别的变量来实现主题切换

在大型前端项目中，这些 token 通常存储在配置文件中（如 JSON），然后通过构建工具（如 Sass、PostCSS）生成 CSS 变量或者直接通过 JavaScript 注入。

简单来说，CSS token 是设计系统中的命名设计元素（如颜色、间距、字体大小等），通常通过 CSS 变量来实现，用于保持设计一致性并简化维护。