1. 作用域差异
普通CSS：
- 全局作用域，所有样式都是全局的
- 容易出现样式冲突和覆盖问题
/* styles.css */
.button {
background-color: blue;
}// 使用普通CSS
import './styles.css';
<button className="button">按钮</button>CSS模块：
- 局部作用域，样式只在当前组件内生效
- 自动生成唯一的类名，避免冲突
/* Button.module.css */
.button {
background-color: blue;
}// 使用CSS模块
import styles from './Button.module.css';
<button className={styles.button}>按钮</button>2. 类名生成机制
普通CSS：
- 类名保持原样：
.button→button
CSS模块：
- 自动生成哈希类名：
.button→Button_button__2x3kl - 确保每个组件的样式独立
3. 使用方式
普通CSS：
// 直接使用字符串
<div className="container header active">CSS模块：
// 通过styles对象引用
<div className={styles.container}>
<div className={`${styles.header} ${styles.active}`}>4. 优缺点对比
| 特性 | 普通CSS | CSS模块 |
|---|---|---|
| 学习成本 | 低 | 中等 |
| 样式冲突 | 容易发生 | 几乎不会 |
| 代码维护 | 困难（大项目） | 容易 |
| 性能 | 一般 | 更好（按需加载） |
| 调试 | 容易 | 稍复杂（类名被哈希） |
5. 适用场景
普通CSS适合：
- 小型项目
- 全局样式（重置样式、主题等）
- 第三方库的样式覆盖
CSS模块适合：
- 中大型项目
- 组件化开发
- 需要样式隔离的场景