CSS 命名和架构方案有哪些？BEM、CSS Modules、CSS-in-JS、Tailwind 的优缺点？
1. BEM（Block Element Modifier）
.card { }
.card__title { }
.card__body { }
.card--featured { }
.card__title--large { }
- ✅ 语义清晰、避免冲突
- ❌ 名称冗长、需要手动维护
2. CSS Modules
.button { background: blue; }
.active { background: red; }
import styles from './Button.module.css'
<button className={styles.button}>Click</button>
- ✅ 编译时自动生成唯一类名，天然隔离
- ✅ 配合构建工具零配置
- ❌ 不能动态切换样式（需要条件 className）
3. CSS-in-JS（styled-components / Emotion）
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
padding: 8px 16px;
`
<Button primary>Click</Button>
- ✅ 动态样式、组件级隔离、JS 变量复用
- ❌ 运行时开销、调试困难、增加包体积
- ❌ SSR 处理复杂
4. Tailwind CSS（原子化 CSS）
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Click
</button>
- ✅ 不用命名、开发速度快、包体积小（PurgeCSS）
- ✅ 统一设计系统
- ❌ HTML 结构臃肿、学习曲线
- ❌ 复杂动画和特殊样式不便
5. Scoped CSS（Vue）
<style scoped>
.button { background: blue; }
</style>
- ✅ Vue 原生支持、简单
- ❌ 子组件穿透需要 :deep()
对比总结
| 方案 |
隔离性 |
动态样式 |
开发速度 |
包体积 |
适合场景 |
| BEM |
依赖命名 |
❌ |
中 |
小 |
传统项目 |
| CSS Modules |
✅ 编译时 |
❌ |
快 |
小 |
React 项目 |
| CSS-in-JS |
✅ 运行时 |
✅ |
快 |
大 |
动态主题 |
| Tailwind |
❌ |
❌ |
最快 |
最小 |
快速开发 |
| Scoped |
✅ |
❌ |
快 |
小 |
Vue 项目 |
选择建议
- Vue 项目：Scoped CSS 或 CSS Modules
- React 项目：CSS Modules 或 Tailwind
- 设计系统：CSS-in-JS（动态主题）
- 快速原型：Tailwind
- 遗留项目：BEM + Sass
同分类其他题目