看了這篇文章，想想自己也經常和 CSS 打交道，對於壓縮 CSS 還是有一點心得。總結一下，和大家分享。
我們知道，在 XHTML+CSS 佈局流行的今天，CSS 已經成爲一個網站事實上的“門面”。那麼爲什麼我們需要一個儘可能小的 CSS 文件呢？這主要是基於流量和讀取速度兩方面考慮。小的 CSS 文件可以節省你的服務器流量，同時縮短用戶打開你網頁所需的時間。既節省了流量開支，又獲得了更好的用戶體驗，何樂不爲呢？下面我們一起看看有哪些縮小 CSS 的方法。
- 簡化你的註釋
很多情況下，特別是曾經從事過 C/Java 等語言開發工作的程序員，可能會喜歡寫多行註釋，例如：
/*————————*/
/*—comments——–*/
/*————————*/
在編譯語言中這樣的註釋當然沒有問題，但在 CSS 中他們會顯著的增大 CSS 文件的體積，應該嘗試簡化成這樣：
/*Comments*/
這樣在保持可讀性的同時，減小了文件體積。事實上，在一個真正發佈版本的 CSS 文件中，你完全可以去掉這些註釋。 - 簡化顏色代碼
在 CSS 中，我們經常會跟十六進制顏色代碼打交道。你可能習慣於寫成以下“標準形式”：
color: #ffffff;
color: #ff88ff;
事實上，在 CSS 中是可以簡化這個寫法的，我們可以寫成：
color: #fff;
color: #f8f; - 使用單行屬性代替多行屬性
在 CSS 中像 margin/padding/font/border 等屬性均可以用一行來代替很多行設置，例如：
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
我們可以寫成：
padding: 10px 0 10px 0;
順序爲上、右、下、左，當然，對於 margin 和 padding 屬性，當左右/上下的值相同時，還可以寫的更簡單，例如上面的例子，可寫爲：
padding: 10px 0;
上下左右都相同時，甚至可以寫成：
padding: 10px;
對於其它縮寫方法，可以參考網上一些資料。當然，我更推薦使用 TopStyle 這款軟件在寫 CSS 的過程中學習，它會給出具體提示。 - 當值爲 0 時可省略掉單位
例如：padding: 0; - 同時設定多個元素的屬性
舉例說明。例如：
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
更讚的寫法是這樣：
h1,h2,h3 {
margin: 0;
padding: 0;
} - 刪除空白和換行
這是個很不起眼的操作，但對於脫離了開發階段，而要應用在網絡上的 CSS 而言應該進行這樣的處理，至少 Google 所有應用都是這樣做的。舉個例子：
h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}
應該處理成：
h1{margin:0;padding:0;}
blockquote{background:#fcc;}
事實上，在 CSS 文件中可以不需要任何換行的。但是爲了保持代碼那麼一點點可讀性，我還是比較建議每個元素寫成一行。現在可以利用一些工具來進行類似的操作，因此它將不會影響你的開發過程。 - 設定過期時間，使用 GZip
如果有條件的話，我們應該設定 CSS 文件的過期時間，並開啓 GZip 來傳輸 CSS 文件。設定前者可以讓流行的瀏覽器緩存你的 CSS 文件，從而避免每次 Load 都要讀取文件，大大加快速度同時也降低流量消耗。而開啓 GZip 則可以讓你的 CSS 文件縮小的難以想象的程度，而且如今流行的瀏覽器都是支持 GZip 的。