# CSS 模块化（CSS Modules）

URL: https://caijiao.org/react/chapter12/css-modules
Source: docs/react/chapter12/css-modules.md
Description: CSS 模块化（CSS Modules）是一种局部作用域 CSS 的解决方案，它能够避免全局样式污染，并允许每个组件拥有独立的样式，使得样式更具可维护性。

CSS 模块化（CSS Modules）是一种 CSS 作用域的管理技术，它通过将每个组件的 CSS 样式局部化，避免了全局样式污染的问题。CSS Modules 允许每个 CSS 文件的类名和 ID 仅在其对应的组件中有效，从而提升了代码的可维护性和可重用性。

## 1. CSS 模块化的工作原理

CSS Modules 的核心思想是通过自动生成唯一的类名，确保同一项目中不同组件的样式不会发生冲突。具体实现方式是将 CSS 类名转换为具有唯一标识符的名称，避免全局作用域下的样式污染。

### 示例

假设我们有一个 `Button` 组件，定义了一个 `button.module.css` 文件：

```css
/* button.module.css */
.button {
  background-color: blue;
  color: white;
}
````

在组件中，我们引入这个样式：

```jsx
import styles from './button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}
```

此时，`styles.button` 会自动变成一个唯一的类名，如 `button_button__3hldf`，并且这个类名只在 `Button` 组件内有效。

## 2. CSS Modules 的优势

### 局部作用域

CSS Modules 允许每个组件有自己独立的样式，而不需要担心样式的命名冲突。样式仅在该组件内生效，避免了全局样式的影响。

### 可维护性与可重用性

由于 CSS Modules 的样式是局部作用域的，组件的样式只会影响到组件本身，增加了代码的可维护性。同时，组件可以轻松地复用，不会受到外部样式的干扰。

### 自动化处理

CSS Modules 自动生成唯一的类名，并将其应用于组件。这意味着开发者不需要手动管理类名命名规则，减少了出错的可能性。

## 3. 配置与使用

### 在 Webpack 中启用 CSS Modules

如果你在使用 Webpack，可以通过 `css-loader` 来启用 CSS Modules：

```bash
npm install --save-dev css-loader
```

然后在 Webpack 配置文件中设置：

```js
module: {
  rules: [
    {
      test: /\.module\.css$/,
      use: [
        'style-loader',
        'css-loader?modules',
      ],
    },
  ],
}
```

这会告诉 Webpack 处理以 `.module.css` 结尾的文件为 CSS Modules。

### 在 Next.js 中使用 CSS Modules

Next.js 内建支持 CSS Modules，你只需要确保你的 CSS 文件以 `.module.css` 结尾，并在组件中导入即可：

```jsx
import styles from './button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}
```

Next.js 会自动为每个类名生成唯一标识符。

## 4. 注意事项

* **命名约定**：在使用 CSS Modules 时，需要使用 `.module.css` 或 `.module.scss` 来区分模块化样式。
* **CSS 变量支持**：CSS Modules 不会自动处理 CSS 变量，如果需要在模块化样式中使用 CSS 变量，必须手动定义并使用。
* **样式继承**：由于类名是局部作用域的，如果需要样式继承或复用，可以使用 `@import` 或 `composes` 语法（在某些构建工具中）。

## 5. 总结

CSS Modules 提供了一种强大的方法来管理组件的样式，避免了样式冲突问题，并增强了组件的可重用性。通过局部作用域的样式管理，它让大型应用的样式维护变得更加简单和清晰。如果你正在构建一个 React 应用，CSS Modules 是一个非常值得使用的技术，特别是在处理大量组件样式时。