样式库总览#

样式库把分散的视觉决策沉淀为可复用的资产，让产品在不同页面、不同同学手中保持一致。

什么是样式库#

样式库包含：

• 基础变量（颜色、间距、字号、圆角）
• 通用工具类或 mixin
• 业务组件样式
• 主题与暗黑模式方案

为什么需要样式库#

• 避免「同一个蓝色出现 5 种写法」
• 改一处即可全局生效
• 降低设计与开发的沟通损耗

组成结构#

styles/
  tokens.css     变量与 Token
  base.css       重置与基础
  components.css  组件样式
  themes.css     主题切换

使用建议#

• 直接写颜色值时先想：有没有对应的 Token
• 业务样式尽量基于组件样式扩展，不要从头写
• 主题相关颜色一律走 CSS 变量

本栏目导航#

• Design Token 与 CSS 变量
• 组件样式封装
• 主题定制与暗黑模式
• 响应式与多端适配