資料來源：帕蘭印象 http://paranimage.com/18-css-compression-tools-and-techniques/

推薦工具：第五個

壓縮還是不壓縮

在我們討論如何壓縮CSS之前，需要注意一下在壓縮和代碼的易讀性上常常要有個平衡。很多編碼者以其CSS組織清晰為傲，而且並不希望自己的代碼被 通過壓縮器去掉注釋和斷行。作為一個設計師，你應該分析你所編寫的代碼的目標。如果你要創建一個小的只需要幾行CSS的網站，可能就沒有必要做額外的壓縮。同樣，如果你在編寫需要和一個開放團隊分享的代碼，插入額外的注釋和斷行可以節省你的同事的大量時間並獲得他們真心的感謝。然而，如果你在設計一個需 要大量CSS的大型網站，你肯定要注意你的檔大小並進你所能保持其最小。

可能在尋找壓縮和可能性之間的完美結合上面需要花一些時間，但是它們都值得挖掘而且實現它們的平衡可以讓你的工作變得容易很多。同時，很明顯並不是說壓縮一定會導致可讀性的降低。很多可用於壓縮代碼的技術都能生成更好更有組織的代碼。

考慮到這一點兒，讓我們開始瞭解一些技術已保持CSS檔最小化吧。

空白樣式定義

讓我們從明顯的開始。如果你有一個空白樣式，丟掉它。不要藉口稍後或許會用到，你也知道它們是雜亂的。除非你有一個合理的理由，否則不要添加它們。

縮寫

CSS縮寫是一種將多行CSS合併到單行的方法。 養成使用你知道的所有縮寫技巧的習慣可以明顯的減少你最終寫出的代碼的行數。這裏是個例子：

長寫版本：

縮寫版本：

CSS Sprites

CSS sprites背後的最初想法是減少HTTP請求的數量以加快頁面的載入時間。Sprite實現這個目標的途徑就是拼合多張圖片到一個單獨的圖片檔中， 通常是一個網格格式的圖片。每個單獨的圖片通過切換大的sprite圖片的background-position來顯示。對於CSS代碼來說，使用 sprite技術可以大大的提高代碼的重用度和可維護性，這會明顯的減少CSS的代碼量。

減少注釋

我喜歡在代碼裏面使用注釋。我添加的注釋越多，我就能在視覺上更快的定位到代碼中的不同的部分。然而，如果你需要使用少的資源來高度優化的CSS，過度的注釋就會吃掉寶貴的位元組。所以，試著去掉所有不必要的注釋並重新格式化那些你必須要保留的注釋到盡可能少的位元組。

合理的字體類型(font-Family)

當檔案的大小成為一個大問題的時候，不要將替代字體包進你的font-famly中。去掉所有不必要的累贅，並將你的額外選項減少到一到兩個。

之前

#container{font-family:Palatino,Georgia,Times,serif;}

之後

#container{font-family:Palatino,serif;}

關於字體，強烈推薦閱讀一下玉伯寫的《三談 Web 默認字體》，文中提到的幾篇文章也都值得我們去閱讀和思考。

使用16進制色彩

為了減少位元組數，將所有RGB色值轉換成他們對應的16進制值。這開起來可能沒有太大的意義，但是任何位元組都是值得的！

之前

#container{color:rgb(131, 100, 219);}

之後

#container{color:#8364DB;}

去掉斷行

查看每一個樣式屬性，並將不需要的硬返回去掉。你也可以去掉最後一個分號。

之前

之後

#container{margin:5px;padding:5px 10px 30px 18px}

10個線上CSS壓縮工具

CSS壓縮工具可以自動完成清理你的代碼的大部分工作。它們中的很多會告訴你你的檔被壓縮的百分比，所以請多嘗試幾個以瞭解哪個是最好的。

CSS Drive

可用選項：

壓縮模式：低、普通、高度壓縮
注釋壓縮：不壓縮、全部、或者長於某個特定值的。

1.CSS Compressor

可用選項：

重排屬性
壓縮色彩
壓縮font-weight
小寫化選擇器
去除不必要的空間

去除不必要的分號

2.Arantius

可用選項：

去除注釋
去除至少x位元組長度的注釋

每行一個規則

3.CSS Optimizer

可用選項：

不刪除斷行(Yes 或 No)

可以處理URL、檔或粘貼的文本等方式的CSS

4.Lottery Post

5.Clean CSS 英文版 / 中文版

可用選項：

Pingates

可用選項：

PHP Insider

SevenForty

可用選項：

截斷選項: 500, 1000, 1500 or 2000

該工具基於YUI壓縮器，但是會自動將IE的hacks刪除，開發者給出的解釋是，IE hacks應該以單個檔出現，而不是雜糅在主CSS檔中，這樣會變得難於維護。

Page Column

桌面版CSS壓縮工具推薦

YUI Compressor與TB Compressor

YUI Compressor是yahoo前端團隊開發的一個前端代碼壓縮工具，功能很強大。需要Java運行環境，可以用java命令手動壓縮CSS和JS檔，也可以用ant在編譯的時候批量壓縮。

淘寶前端團隊的玉伯根據YUI compressor封裝的Windows平臺壓縮工具，安裝卸載都很簡單。正如功能強大的YUI Compressor，TBCompressor不僅可以壓縮CSS，也可以壓縮JS。

在這裏下載。瞭解更多關於TBCompressor – JS和CSS壓縮工具

另外，推薦閱讀屈超同學的《完善 TBCompressor 對 CSS 檔的壓縮過程》。這個部分有空再回頭來研究。

web 2.0資源優化工具

國人用delphi 7開發的一款桌面工具，也是可以壓縮CSS和JS。推薦一下。另外值得一提的是，作者放出了該項目的源代碼。

官方介紹及下載。另外，貌似該工具的CSS壓縮部分基於CSS Tidy。

mergeCSS

CSS森林站長鬼哥出品的一個基於AIR的工具，有很多很有用的功能，比如多檔合併、合併@import導入檔等。查看詳細介紹。

需要注意的是，該工具對縮寫和屬性合併的支援並不太好，如果能夠增加這些支持，可能會更好吧。

另外一個非常重要的事情是，到目前為止，鬼哥尚未放出該工具，如果你想嘗試一下，可以聯繫他。

page speed

page speed其實是Google開發的一個基於Firebug的firefox插件，主要是用來分析網站前端性能的。但是在page speed的分析結果列表中Minify CSS選項，點開即可看到你的CSS可以壓縮的比例，以及後面提供一個壓縮過的版本，點擊即可查看。唯一不足的就是不能自定義壓縮。

GZIP

無論多麼醜陋的網站，GZIP都是一個對壓縮很多類型的代碼都的確很有用的工具。它或許並不是最簡單的壓縮方法，而且對初學者可能還會有些迷惑。查看這個教程以獲取更多關於使用GZIP壓縮你的樣式的資訊。

總結

正如我前面說的，這些方法中的一些可能看起來有些過度或毫無意義。關鍵是看大局。雖然這些技巧中的任何一個可能的只有幾乎是微不足道的影響，結合這些技術中的幾個或全部就可以對你的CSS檔的大小形成巨大的影響。