CSS 工程化实践

问题

如何理解 CSS 工程化？它解决了哪些问题？

解答

CSS 工程化主要解决四个方面的问题：

1. 宏观设计

CSS 代码如何组织、如何拆分、模块结构怎样设计。

2. 编码优化

如何写出更好、更易维护的 CSS 代码。

3. 构建优化

如何处理 CSS，让打包结果最优。

4. 可维护性

如何降低后续变更成本，确保团队协作顺畅。

预处理器（Less、Sass）

预处理器让我们可以写”类 CSS”语言，然后编译成标准 CSS。它解决了传统 CSS 的局限性：

提供的能力：

• 嵌套语法，反映层级关系
• 变量定义
• 计算函数
• 代码片段复用（extend、mixin）
• 循环语句
• 模块化

示例：

// Sass 示例
$primary-color: #3498db;

.container {
  background: $primary-color;
  
  .header {
    padding: 20px;
    
    &:hover {
      background: darken($primary-color, 10%);
    }
  }
}

PostCSS

PostCSS 直接处理标准 CSS，类似 Babel 对 JavaScript 的作用。

主要功能：

• 编译浏览器尚未广泛支持的 CSS 语法
• 自动添加浏览器前缀（Autoprefixer）
• 支持 CSS Next 语法
• 通过插件机制扩展 CSS 能力

使用场景：

/* 编译前 */
.container {
  display: flex;
  user-select: none;
}

/* Autoprefixer 处理后 */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Webpack Loader

Webpack 本身只能处理 JavaScript，需要通过 loader 处理 CSS。

核心 loader：

• css-loader：导入 CSS 模块，编译 CSS 代码
• style-loader：创建 <style> 标签，将 CSS 插入 DOM

配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 注意顺序
      }
    ]
  }
};

执行顺序： loader 从右到左执行，所以 css-loader 必须在 style-loader 前面。先编译 CSS，再插入页面。

关键点

• CSS 工程化解决组织结构、编码质量、构建优化和可维护性四大问题
• 预处理器提供嵌套、变量、函数等编程能力，增强 CSS 表达力
• PostCSS 处理标准 CSS，提供自动前缀、语法转换等功能
• Webpack 通过 css-loader 和 style-loader 处理 CSS，注意执行顺序
• 三种方案可组合使用，形成完整的 CSS 工程化体系