{}
export function Button({ className, variant, size, ...props }: ButtonProps) {
return ;
}
```
## CSS Modules（简单可靠）
```typescript
// Button.module.css
.button {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--color-primary-foreground);
transition: background var(--duration-normal) var(--ease-out);
}
.button:hover { background: hsl(220, 90%, 50%); }
.button.destructive { background: var(--color-danger); }
.button.lg { padding: var(--space-3) var(--space-6); }
// Button.tsx
import styles from './Button.module.css';
import { clsx } from 'clsx';
export function Button({ variant = 'default', size = 'md', className, children }) {
return (
);
}
```
## vanilla-extract（类型安全 + 编译时）
```typescript
// button.css.ts
import { style, styleVariants } from '@vanilla-extract/css';
import { vars } from './theme.css';
const base = style({
padding: `${vars.space[2]} ${vars.space[4]}`,
borderRadius: vars.radius.md,
transition: `background ${vars.duration.normal} ${vars.ease.out}`,
});
export const button = styleVariants({
default: [base, { background: vars.color.primary }],
destructive: [base, { background: vars.color.danger }],
outline: [base, { border: `1px solid ${vars.color.border}` }],
});
```
## 暗黑模式实现
### 方案 A：CSS 变量 + class 切换（推荐）
```css
:root { --color-bg: white; --color-fg: black; }
[data-theme='dark'] { --color-bg: #0a0a0a; --color-fg: #f5f5f5; }
.app { background: var(--color-bg); color: var(--color-fg); }
```
```typescript
// 主题切换 hook
function useTheme() {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
useEffect(() => {
const saved = localStorage.getItem('theme') as 'light' | 'dark';
const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const initial = saved ?? system;
setTheme(initial);
document.documentElement.dataset.theme = initial;
}, []);
const toggle = () => {
const next = theme === 'light' ? 'dark' : 'light';
setTheme(next);
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
};
return { theme, toggle };
}
```
### 方案 B：next-themes（Next.js）
```typescript
import { ThemeProvider } from 'next-themes';
// 用法
const { theme, setTheme } = useTheme();
```
## 响应式策略
```text
Mobile-First：
默认样式 → 手机
sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px
Tailwind 范式：
CSS：
.title { font-size: 14px; }
@media (min-width: 768px) { .title { font-size: 16px; } }
@media (min-width: 1024px) { .title { font-size: 18px; } }
```
## 工作流程
```text
1. 选样式方案（基于团队 + 项目）
↓
2. 建立设计 Token（与 UI/UX 同步）
- 颜色 / 间距 / 字体 / 圆角 / 阴影
↓
3. 配置框架（Tailwind / Postcss）
↓
4. 暗黑模式从一开始
↓
5. 实现组件样式
- 用 Token 不写魔术值
↓
6. 响应式（mobile-first）
↓
7. 性能验证
- PurgeCSS / Tree-shake
- 包大小
```
## 配套模板
- `templates/styling-system-template.md` — 设计 Token + Tailwind 配置 + 暗黑模式 + 响应式
## 质量自检
```text
□ 一种样式方案
□ 设计 Token 完整（与 UI/UX 同步）
□ 不写魔术值（颜色 / 间距 / 圆角）
□ 暗黑模式支持
□ 响应式 mobile-first
□ 焦点环可见（focus-visible）
□ 颜色对比度 ≥ 4.5:1
□ 动画 transform / opacity（不用 layout）
□ 减少 reflow
□ Tailwind / UnoCSS PurgeCSS 启用
□ 包大小（CSS < 50KB）
□ 不全局污染
□ 不混合方案
```
## 常见坑
1. **混合方案**——Tailwind + styled-components 同存
2. **写死颜色**——`color: #4287f5` 而非 token
3. **不暗黑**——后期重构成本大
4. **CSS-in-JS 运行时开销**——影响渲染性能
5. **不 PurgeCSS**——Tailwind 包 3MB
6. **inline style 滥用**——不可复用
7. **!important 滥用**——级联崩
8. **z-index 魔术值**——`z-index: 99999`
9. **动画用 width / top**——大量 reflow
10. **focus 不可见**——a11y 失败
11. **响应式 desktop-first**——移动端样式难
12. **CSS 变量不用 hsl**——无法 alpha 调整
13. **图标用 png**——应该用 SVG
14. **大字体未做 fallback**——FOUT / FOIT
## 与其他 skill 的协作
```text
上游：
ui-ux-designer 工作流 design-tokens skill → Token 来源
ui-ux-designer atomic-design → 组件层级
下游：
component-architecture → 组件接受 className
accessibility-implementation → 焦点 / 对比度
performance-optimization → 包大小
```
## 相关参考
- 项目根 `references/frontend-tech-stack-guide.md` — 样式方案对比
- ui-ux-designer 工作流 design-tokens skill