什么是 CSS 模块化？如何实现？

推荐答案

CSS 模块化是一种将 CSS 代码拆分为多个独立模块的开发方式，每个模块负责特定的样式功能，避免全局样式污染，提高代码的可维护性和复用性。实现 CSS 模块化的方式包括：

1. BEM 命名规范：通过 Block、Element、Modifier 的命名规则，确保样式类名的唯一性和可读性。
2. CSS Modules：通过构建工具（如 Webpack）将 CSS 文件中的类名局部化，生成唯一的类名，避免样式冲突。
3. CSS-in-JS：将 CSS 直接写在 JavaScript 中，利用 JavaScript 的模块化特性管理样式。
4. 预处理器（如 Sass、Less）：通过嵌套、变量、混合等功能，实现样式的模块化组织。

本题详细解读

1. BEM 命名规范

BEM 是一种命名约定，通过将样式类名分为 Block（块）、Element（元素）、Modifier（修饰符）三部分，确保类名的唯一性和可读性。例如：

.block {}
.block__element {}
.block--modifier {}

这种方式可以有效避免全局样式冲突，但需要开发者严格遵守命名规则。

2. CSS Modules

CSS Modules 是一种通过构建工具实现的模块化方案。在 Webpack 中，可以通过配置 css-loader 启用 CSS Modules。例如：

-- -------------------- ---- -------
-- -----------------
-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          ---------------
          -
            ------- -------------
            -------- -
              -------- -----
            --
          --
        --
      --
    --
  --
--

在 CSS 文件中，类名会被局部化：

/* styles.module.css */
.title {
  color: red;
}

在 JavaScript 中引用时，类名会被转换为唯一的哈希值：

import styles from './styles.module.css';
document.getElementById('app').innerHTML = `<h1 class="${styles.title}">Hello World</h1>`;

3. CSS-in-JS

CSS-in-JS 是一种将 CSS 直接写在 JavaScript 中的技术，常见的库包括 styled-components 和 emotion。例如：

-- -------------------- ---- -------
------ ------ ---- --------------------

----- ----- - ----------
  ------ ----
--

-------- ----- -
  ------ ------------ --------------
-

这种方式可以充分利用 JavaScript 的模块化特性，动态生成样式，但可能会增加运行时开销。

4. 预处理器（如 Sass、Less）

Sass 和 Less 等预处理器通过嵌套、变量、混合等功能，帮助开发者更好地组织 CSS 代码。例如：

-- -------------------- ---- -------
-- ---------------
--------------- ----

-- -----------
------- ------------

------ -
  ------ ---------------
-

这种方式可以提高代码的可维护性，但需要额外的编译步骤。