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模块适合：

• 中大型项目
• 组件化开发
• 需要样式隔离的场景