CSS文件合成（或叫CSS合并）指的是將多個CSS文件中的樣式規則合并成一個單獨的CSS文件。

CSS文件合成的優點在于可以減少HTTP請求次數，提升網站性能。當在網頁頭部引入多個CSS文件時，每個文件都需要一個HTTP請求，而如果將它們合并成一個文件，則只需要一個HTTP請求。

/* 示例1 */
/* file1.css */
body {
background-color: #f1f1f1;
}
/* file2.css */
h1 {
font-size: 36px;
}
/* 合并后的文件 combine.css */
body {
background-color: #f1f1f1;
}
h1 {
font-size: 36px;
}

在合并CSS文件時，需要注意以下幾點：

• 合并后的CSS文件必須按照樣式規則先后順序來合并，否則可能會出現樣式沖突。
• 合并后的CSS文件應該盡量對樣式進行優化，例如去掉重復的樣式規則、對相同的屬性值進行壓縮等。
• 如果使用CSS預處理器（如Sass或Less），則應該在預處理器中完成樣式的合并工作，以便在編譯后生成合并的CSS文件。

CSS文件合成可以使用前端構建工具（如Webpack）或在線工具（如CSSMinifier）來完成。

/* 示例2：使用Webpack合并CSS文件 */
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: 'styles.css' })
]
};
/* 在命令行中執行命令：webpack */
/* 將會在dist文件夾中生成bundle.js和styles.css兩個文件 */

綜上所述，CSS文件合成是一項非常有用的優化技術，可以提升網站性能和用戶體驗。