CSS 变量最佳实践

范式

1. token 分类

把变量按"功能"分组，不要按"组件"分组。

:root {
  /* 颜色 */
  --color-bg: #fff;
  --color-text: #1a1a1a;
  --color-accent: #0070f3;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* 字体 */
  --font-size-base: 16px;
  --font-weight-bold: 700;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* 动效 */
  --transition-fast: 150ms ease;
}

2. 主题切换

html[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-text: #f5f5f5;
  --color-accent: #58a6ff;
}

<html data-theme="dark"> 一加，整个站点主题切换——不需要任何 JS 重渲染。

3. 继承的优雅

子组件的局部变量覆盖 token 即可：

.alert {
  --color-accent: #dc2626;  /* 局部红色 */
  background: var(--color-accent);
}

坑

1. 不要在 calc 里"硬编码"倍数

/* ❌ 难维护 */
padding: calc(var(--space-md) * 2);

/* ✅ 抽象新 token */
:root {
  --space-double: 32px;
}
padding: var(--space-double);

2. 响应式

在 @media 里重定义变量比覆盖每个属性优雅：

:root {
  --font-size-base: 16px;
}

@media (max-width: 760px) {
  :root {
    --font-size-base: 15px;
  }
}

3. JS 读取

const accent = getComputedStyle(document.documentElement).getPropertyValue('--color-accent');

不要读 style.cssText——可能拿不到 :root 里的值。

何时不要用

一处一用的 magic number：变量反而增加间接层
跨站点设计系统：SCSS/Less 变量更合适（编译时静态化）

我的应用

sslepy.online 所有颜色、间距、圆角、过渡时长都走 token。整个站点不到 50 个变量，但支持亮/暗主题切换 + 站点风格可整体调整。

CSS 变量（自定义属性）最佳实践