CSS命名规范
BEM — Block Element Modifier
最广泛采用。分离块、元素（__）和修饰符（--）
/* Block */
.card { }
/* Element (belongs to block) */
.card__title { }
.card__image { }
.card__body { }
/* Modifier (variation) */
.card--featured { }
.card--dark { }
.card__title--large { }
SMACSS — Scalable and Modular Architecture
将CSS分为：基础、布局、模块、状态、主题
/* Base — element defaults */
body { margin: 0; }
a { color: inherit; }
/* Layout — prefix l- */
.l-grid { display: grid; }
.l-sidebar { width: 280px; }
/* Module — reusable components */
.nav { }
.btn { }
/* State — prefix is- */
.is-active { }
.is-hidden { }
/* Theme — prefix theme- */
.theme-dark { }
OOCSS — Object-Oriented CSS
两个原则：结构与皮肤分离，容器与内容分离
/* Structure (reusable) */
.media { display: flex; gap: 16px; }
.media__body { flex: 1; }
/* Skin (visual, separable) */
.media--rounded img { border-radius: 50%; }
/* Don't couple container to content */
/* Bad: */ .sidebar h2 { color: blue; }
/* Good: */ .section-title { color: blue; }
方法对比
| 方法 | 学习曲线 | 适合场景 | 类名冗长度 |
|---|---|---|---|
| BEM | 中等 | 组件库 | 中等 |
| SMACSS | 高 | 大型团队 | 低 |
| OOCSS | 中等 | 可复用UI系统 | 低 |
| 工具优先（Tailwind） | 低 | 快速原型 | 高（在HTML中） |
| CSS Modules | 低 | React/Vue项目 | 自动作用域 |