用途
样式系统（Styling System）用于在前端项目中选择和实现样式方案，涵盖从方案对比、设计 Token 建立到具体编码落地的完整过程。
覆盖的样式方案
- Tailwind CSS（原子化）
- UnoCSS（原子化）
- CSS Modules（局部作用域）
- styled-components / Emotion（CSS-in-JS）
- vanilla-extract（编译时 CSS-in-JS）
- Linaria（编译时）
- Sass / Less（预处理）
技能以表格形式对比各方案的包大小、类型安全、主题切换能力与适用场景。
推荐组合：
- React 新项目：Tailwind CSS + shadcn/ui + Radix UI，暗黑模式与主题切换依靠 CSS 变量
- Vue 3 新项目：UnoCSS / Tailwind + Element Plus / Naive UI
- 设计系统强：vanilla-extract + 自有 Token + Headless UI
- 老项目兼容：CSS Modules + Sass
- 需避免：Tailwind 与 styled-components 混用、大量 inline style、全局 CSS 不限作用域
核心原则
- 设计 Token 优先：颜色 / 间距 / 字体 / 圆角全用变量
- 一种样式方案：不要 Tailwind + CSS-in-JS 混用
- 局部作用域：避免全局污染
- 响应式 mobile-first：小屏先写，大屏覆盖
- 暗黑模式从一开始考虑：用 CSS 变量切换
- 不写魔术值：不用 padding: 17px，而用 padding: var(--space-4)
- 性能感知：关注 CSS-in-JS 运行时开销、Tailwind + PurgeCSS 包大小、vanilla-extract 编译时特性；动画用 transform / opacity 而非 layout 属性
设计 Token 体系
技能给出 tokens.css 示例，定义语义化颜色（primary、secondary、success、warning、danger、muted、foreground、background、border）、间距（space-1 到 space-12）、字体（font-sans、font-mono、多级 font-size）、圆角（radius-sm 到 radius-full）、阴影、动画时长与缓动、布局（container-max、header-height、sidebar-width、z-index 层级）等变量，并提供暗黑模式的变量覆盖写法。
Tailwind CSS 实战
包含 tailwind.config.js 配置示例，用 CSS 变量对接 Token、配置字体与圆角，并引入 @tailwindcss/forms、@tailwindcss/typography、tailwindcss-animate 等插件。还展示 class-variance-authority（cva）模式定义按钮变体（variant 与 size）及组件封装写法。
其他方案示例
- CSS Modules：以 Button.module.css 与 Button.tsx 展示局部作用域与组合类名
- vanilla-extract：以 button.css.ts 展示 styleVariants 与主题变量引用
暗黑模式实现
- 方案 A：CSS 变量 + class 切换（推荐），含 useTheme hook 示例，持久化到 localStorage 并读取系统偏好
- 方案 B：Next.js 使用 next-themes 的 ThemeProvider
响应式策略
Mobile-First 断点：默认（手机）、sm ≥ 640px、md ≥ 768px、lg ≥ 1024px、xl ≥ 1280px、2xl ≥ 1536px，并给出 Tailwind 与原生 CSS 两种写法。
工作流程
- 选样式方案（基于团队 + 项目）
- 建立设计 Token（与 UI/UX 同步）
- 配置框架（Tailwind / Postcss）
- 暗黑模式从一开始
- 实现组件样式（用 Token 不写魔术值）
- 响应式（mobile-first）
- 性能验证（PurgeCSS / Tree-shake、包大小）
质量自检
包括：一种样式方案、设计 Token 完整、不写魔术值、暗黑模式支持、响应式 mobile-first、焦点环可见（focus-visible）、颜色对比度 ≥ 4.5:1、动画用 transform / opacity、减少 reflow、PurgeCSS 启用、包大小（CSS < 50KB）、不全局污染、不混合方案等勾选项。
适用场景
新项目样式方案选型、设计 Token 体系建立、主题切换（亮 / 暗）、响应式实现、组件样式封装、CSS 性能优化。
限制与常见坑
技能列出常见问题：混合方案、写死颜色、不暗黑、CSS-in-JS 运行时开销、不 PurgeCSS、inline style 滥用、!important 滥用、z-index 魔术值、动画用 width / top、focus 不可见、响应式 desktop-first、CSS 变量不用 hsl、图标用 png、大字体未做 fallback 等。
关于收费、价格、平台、效果
技能资料中暂未提供收费、价格、平台或效果相关的事实说明。