什么是 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。例如：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

在 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。例如：

// www.javascriptcn.com code example
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

function App() {
  return <Title>Hello World</Title>;
}

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

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

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

// www.javascriptcn.com code example
// _variables.scss
$primary-color: red;

// styles.scss
@import 'variables';

.title {
  color: $primary-color;
}

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