CSS 代码合并方法

问题

CSS 代码合并有哪些方法？如何优化 CSS 代码体积和可维护性？

解答

1. 选择器合并

相同样式的选择器可以合并：

/* 合并前 */
.header {
  color: #333;
  font-size: 14px;
}
.footer {
  color: #333;
  font-size: 14px;
}

/* 合并后 */
.header,
.footer {
  color: #333;
  font-size: 14px;
}

2. 属性简写

使用简写属性减少代码量：

/* 合并前 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-position: center;
  
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

/* 合并后 */
.box {
  margin: 10px 20px;
  background: url('bg.png') no-repeat center;
  font: bold 14px/1.5 Arial;
}

3. 文件合并（构建工具）

使用 Webpack 合并 CSS 文件：

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    // 提取 CSS 到单独文件
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css'
    })
  ],
  optimization: {
    minimizer: [
      // 压缩合并 CSS
      new CssMinimizerPlugin()
    ]
  }
};

4. @import 合并

/* main.css - 入口文件 */
@import 'reset.css';
@import 'variables.css';
@import 'components.css';
@import 'layout.css';

注意：@import 会产生额外的 HTTP 请求，生产环境建议用构建工具合并。

5. CSS 预处理器合并

// 使用 Sass 的 @use 合并模块
@use 'variables';
@use 'mixins';
@use 'components';

.container {
  color: variables.$primary-color;
  @include mixins.flex-center;
}

关键点

• 选择器合并：相同样式的选择器用逗号分隔
• 属性简写：margin、padding、background、font 等支持简写
• 构建工具：Webpack、Vite 等可自动合并压缩 CSS
• 避免 @import：生产环境用构建工具替代，减少请求数
• 预处理器：Sass/Less 的模块化最终会编译合并成单文件