跳到主要内容

构建一个 web 项目时，通过 :root 定义 CSS 变量 （css custom Properties） 可以统一设计体系、提升可维护性

颜色体系​

颜色变量需覆盖品牌色、功能色、状态色、文本/背景等，多使用 「用途 + 场景」 命名方式。

品牌主色 （Brand Colors）​

  • 主品牌色（核心视觉色，用于按钮、关键交互）： --color-primary: #2563eb; (蓝色系)
  • 主体的变体（浅/深/透明）：
    • --color-primary-light: #eff6ff;（浅）
    • --color-primary-dark: #1d4ed8; （深）
    • --color-primary-50: #f0f9ff; （透明）
  • 辅助品牌色（次核心，用于标签、次要操作）：--color-secondary: #8b5cf6;（辅助）

功能色（Functional Colors）​

  • 成功/完成状态：--color-success: #22c55e;（绿色）
  • 警告/注意状态：--color-warning: #f59e0b;（橙色）
  • 错误/危险状态：--color-error: #ef4444;（红色）
  • 信息/提示状态：--color-info: #06b6d4;（青色）

中性色（Neutrals）​

  • 文本色（不同层级，如标题/正文/辅助文本）：
    • --color-text-primary: #111827;（深灰）
    • --color-text-secondary: #4b5563;（中灰）
    • --color-text-tertiary: #6b7280;（浅灰）
  • 背景色（页面/容器/分隔线）：
    • --color-bg-primary: #ffffff;（白）
    • --color-bg-secondary: #f8fafc;（浅白）
    • --color-border: #e5e7eb;（边框灰）
  • 禁用状态：
    • --color-disabled: #f3f4f6;（禁用背景）
    • --color-disabled-text: #9ca3af;（禁用文本）

扩展支持​

  • 可动态切换的变量（通过 JS 修改 :root 变量实现主题切换）：
    • --color-bg-primary: var(--color-bg-primary-light);（默认浅色模式）
    • --color-text-primary: var(--color-text-primary-dark);（默认深色模式）

色系​

不同的色系带给用户的视觉效果不同、展现网站的风格不同

蓝色系​

  • 纯蓝色（#0000FF）常用于标题、重要提示信息等，以突出显示内容。例如，在新闻网站中，文章的标题可以使用纯蓝色，在不同背景下都能让用户快速识别。
  • 天蓝色（#87CEEB）） 适合用于正文文本，既不会过于刺眼，又能保证在不同背景下的可读性。比如，在一些文艺风格的网站中，天蓝色的正文文本能营造出温馨的氛围。

其他蓝色：

  • 天蓝色 --blue-azure: #0080ff;
  • 蔚蓝色 --blue-blue: #246bfb;
  • 浅蓝色 --blue-light: #e0ffff;
  • 海军蓝 --blue-navy: #000080;
  • 海蓝色 --blue-ocean: #00456b;
  • 浅海蓝 --blue-: #a1d8e6;
  • 鸭翅绿 --blue-: #008080;

绿色系​

  • 纯绿色（#008000）
    • 效果：在白色背景上，纯绿色显得生机勃勃；在黑色背景下，它同样清晰可见，能传达出积极、健康的信息。
    • 使用建议：可用于表示成功、安全等含义的文本，如注册成功提示、系统正常运行状态等。
  • 草绿色 （#7CFC00）
    • 效果：草绿色比较明亮，在白色背景下具有一定的视觉冲击力；在黑色背景下，它能提供很好的对比度，使文本易于阅读。
    • 使用建议：适合用于需要强调的部分，如活动的限时优惠信息等。

橙色系​

  • 橙色（#FFA500）
    • 效果：橙色是一种非常醒目的颜色，在白色背景下十分耀眼；在黑色背景下，它能与黑色形成鲜明对比，吸引用户的目光。
    • 使用建议：常用于突出重要操作按钮上的文本，如“立即购买”“下载”等，提高用户的点击率。
  • 淡橙色（#FFB90F）
    • 效果：淡橙色相对柔和一些，在白色背景下给人一种温暖的感觉；在黑色背景下，也能清晰地显示文本内容。
    • 使用建议：可用于导航栏的链接文本，让用户在不同背景下都能轻松找到导航入口。

紫色系​

  • 深紫色（#800080）
    • 效果：在白色背景下，深紫色显得高贵、神秘；在黑色背景下，它依然具有一定的对比度，能清晰呈现文本。
    • 使用建议：适用于一些具有文化、艺术氛围的网站，用于标题或重要段落的文本，增添独特的气质。
  • 淡紫色（#EE82EE）
    • 效果：淡紫色比较柔和且醒目，在白色背景下有较好的视觉效果；在黑色背景下，也能保证文本的可读性。
    • 使用建议：可用于提示性文本，如消息通知等。

其他色​

  • 暗红 （#900022）
  • 米色 （#f0f2e6）
  • 橘黄色 （#c99e8c）
  • 滇红 （#d80010）
  • 浅黄 （#f0f2e5）
  • 浅黄 （#f0f2e5）

尺寸与间距（布局的基础单位）​​

统一间距、字体大小、元素尺寸的变量，避免硬编码数字，方便全局调整。

间距（Spacing）​

  • 基础单位（建议以 4px 或 8px 为基准，符合多数设计系统）：--spacing-unit: 8px;
  • 衍生间距（通过 calc() 组合基础单位，覆盖常用场景）：
    • --spacing-1: calc(var(--spacing-unit) * 0.5);（4px）
    • --spacing-2: var(--spacing-unit);（8px）
    • --spacing-4: calc(var(--spacing-unit) * 2);（16px）
    • --spacing-8: calc(var(--spacing-unit) * 4);（32px）
    • --spacing-12: calc(var(--spacing-unit) * 6);（48px）
    • --spacing-16: calc(var(--spacing-unit) * 8);（64px）
    • --spacing-20: calc(var(--spacing-unit) * 10);（80px）
    • --spacing-24: calc(var(--spacing-unit) * 12);（96px）
  • 方向性间距（简化调用，如 margin/padding 的简写）：
    • --space-inset-2: var(--spacing-2);（上下左右均为 8px）
    • --space-inset-4: var(--spacing-4);（上下左右均为 16px）
    • --space-inset-squash: var(--spacing-2) var(--spacing-8);（上下 8px，左右 32px）

字体大小（Font Sizes）​

基于 rem（根字体大小建议设为 16px，兼容浏览器默认），定义层级：

  • --font-size-base: 1rem;（16px，正文默认）
  • --font-size-sm: 0.875rem;（14px，辅助文本）
  • --font-size-md: 1.125rem;（18px，小标题）
  • --font-size-lg: 1.5rem;（24px，大标题）
  • --font-size-xl: 2.25rem;（36px，主标题）
  • --font-size-2xl: 3rem;（48px，超大标题）

元素尺寸（Component Sizes）​

  • 按钮/输入框等组件的高度：
    • --height-sm: 2rem;（32px，小按钮）
    • --height-md: 2.5rem;（40px，常规按钮）
    • --height-lg: 3rem;（48px，大按钮）
  • 输入框内边距：--input-padding: var(--spacing-2) var(--spacing-4);（8px 16px）

圆角​

卡片圆角：

  • --radius-sm: 0.25rem;（4px，小圆角）
  • --radius-md: 0.5rem;（8px，中等圆角）
  • --radius-card: 0.75rem;（12px，卡片圆角)
  • --radius-full: 100vmax; （全尺寸圆角）

边框​

边框配置：

  • --border-width: 1px;
  • --border-style: solid;
  • --border-color: var(--color-border);

组合使用 border: var(--border-width) var(--border-style) var(--border-color);

阴影（Shadows）​

定义不同层次的阴影，用于卡片、模态框、悬停效果等，按「强度」分级。

  • 浅阴影（卡片/列表项）：--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  • 中阴影（模态框/下拉菜单）：--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  • 强阴影（弹出层/悬停按钮）：--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  • 悬浮阴影（按钮/卡片悬停）：--shadow-hover: 0 2px 8px -1px rgba(0, 0, 0, 0.15);

透明度 （opacity）​

配置不同的透明度有助于统一风格和提升用户适应

  • --opacity-disabled: 0.6; （禁用元素透明度）

字体（Typography）​

统一字体家族、字重、行高，提升文字可读性。

  • 字体家族（优先系统默认，可选自定义字体）：--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;（等宽字体）
  • 字重（对应字体文件的 weight）：
    • --font-weight-light: 300;
    • --font-weight-regular: 400;
    • --font-weight-medium: 500;
    • --font-weight-bold: 700;
  • 行高（与字体大小关联，或独立定义）：
    • --line-height-base: 1.5;（常规正文）
    • --line-height-tight: 1.2;（标题）

过渡与动画（Interactions）​

统一交互反馈的时间和缓动函数，让操作更流畅。

  • 过渡时间：
    • --transition-fast: 0.1s;（快速反馈，如按钮 hover）
    • --transition-medium: 0.2s;（常规交互，如模态框展开）
    • --transition-slow: 0.3s;（复杂动画）
  • 缓动函数：
    • --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);（推荐，符合 Material Design）
    • --ease-out: cubic-bezier(0, 0, 0.2, 1);

响应式断点（Media Queries）​

定义全局断点，统一不同屏幕尺寸下的布局逻辑（可选，也可直接在媒体查询中使用变量）。

常用的响应式媒体条件：

  • @media screen and (min-width: 992px) 大屏设备（台式机、笔记本等）
  • @media screen and (max-width: 991px) and (min-width: 768px) 平板和小型显示器
  • @media (max-width: 767px) 智能手机或小型平板设备
  • @media only screen and (max-width: 768px) only screen 用于排除打印和其他非屏幕媒体类型
  • @media (pointer: fine) 输入设备（如鼠标、触控笔）能够精确指向屏幕上的元素
  • @media (prefers-reduced-motion:reduce) 减少动画或界面中的运动效果时
  • @media print 当文档被打印时
  • @media (hover: hover) 当用户的输入设备支持悬停

使用自定义量

  • 移动端（小屏）：--breakpoint-sm: 480px;
  • 平板（中屏）：--breakpoint-md: 768px;
  • 桌面（大屏）：--breakpoint-lg: 1024px;
  • 超宽屏：--breakpoint-xl: 1280px;
// 超大屏

@media screen and (min-width: var(--breakpoint-xl)) {
  body {
    margin: 100px;
  }
}

// 桌面端
@media screen and (min-width: var(--breakpoint-lg)) {
  body {
    margin: 80px;
  }
}

// 平板
@media screen and (max-width: var(--breakpoint-lg)) and (min-width: var(--breakpoint-md)) {
  body {
    margin: 60px;
  }
}

// 手持端机
@media screen and (max-width: var(--breakpoint-md)) {
  body {
    margin: 40px;
  }
}

// 所有的 :hover 放到这里是极好的，省得在触屏手机上残留 `:hover` 样式
//  光标可触发 hover 且光标已就位
@media (hover: hover) and (pointer: fine) {
  body:hover {
    box-shadow: var(--shadow-hover);
  }
}