标准答案
- 普通 CSS 或 Sass 适合简单项目和全局样式，但要靠命名规范避免污染。
- CSS Modules 提供文件级类名隔离，适合大多数组件化业务项目。
- CSS-in-JS 适合强动态样式、主题和组件库封装，但要关注运行时成本、SSR 提取和缓存。
- 原子化 CSS 适合快速组合和设计约束明确的团队，但模板类名可能较长，需要统一规范。
- 组件库项目还要设计 design token，让颜色、间距、圆角、阴影和主题切换有统一来源。
题目解析
这道题要避免变成工具喜好。方案选型应该围绕隔离、动态能力、构建运行成本、SSR 和团队协作。
React 本身不内置 scoped 样式，组件样式隔离需要依赖约定或工具。
如果项目已经有成熟组件库和主题 token，业务侧 CSS 方案要和组件库变量体系兼容。
代码示例
下面是 CSS Modules 在 React 组件里的基本使用方式。
TSX
import styles from './UserCard.module.css'
function UserCard({ name }: { name: string }) {
return (
<article className={styles.card}>
<h2 className={styles.title}>{name}</h2>
</article>
)
}常见误区
- 只按个人偏好选择 CSS 方案，不看 SSR、主题、团队规范和运行时成本。
- 全局 CSS 命名没有约束，组件之间样式互相污染。
- 为了少写 CSS 过度依赖内联 style，导致伪类、媒体查询和主题能力受限。