很多人都有代碼潔癖。這不是件壞事。
本文將整理集中你可以用來優(yōu)化你的CSS的技術，以及一些可以自動壓縮你的代碼的在線和桌面壓縮工具。
在我們討論如何壓縮CSS之前，需要注意一下在壓縮和代碼的易讀性上常常要有個平衡。很多編碼者以其CSS組織清晰為傲，而且并不希望自己的代碼被通過壓縮器去掉注釋和斷行。作為一個設計師，你應該分析你所編寫的代碼的目標。如果你要創(chuàng)建一個小的只需要幾行CSS的網(wǎng)站，可能就沒有必要做額外的壓縮。同樣，如果你在編寫需要和一個開放團隊分享的代碼，插入額外的注釋和斷行可以節(jié)省你的同事的大量時間并獲得他們真心的感謝。然而，如果你在設計一個需要大量CSS的大型網(wǎng)站，你肯定要注意你的文件大小并進你所能保持其最小。
可能在尋找壓縮和可能性之間的完美結合上面需要花一些時間，但是它們都值得挖掘而且實現(xiàn)它們的平衡可以讓你的工作變得容易很多。同時，很明顯并不是說壓縮一定會導致可讀性的降低。很多可用于壓縮代碼的技術都能生成更好更有組織的代碼。
考慮到這一點兒，讓我們開始了解一些技術已保持CSS文件最小化吧。
讓我們從明顯的開始。如果你有一個空白樣式，丟掉它。不要借口稍后或許會用到，你也知道它們是雜亂的。除非你有一個合理的理由，否則不要添加它們。
CSS縮寫是一種將多行CSS合并到單行的方法。 養(yǎng)成使用你知道的所有縮寫技巧的習慣可以明顯的減少你最終寫出的代碼的行數(shù)。這里是個例子：
長寫版本:
#container{ padding-top:5px padding-right:10px padding-bottom:30px padding-left:18px}
縮寫版本:
#container{ padding:5px 10px 30px 18px;}
了解更多CSS縮寫技巧，可以訪問下面的文章：
推薦閱讀阿捷的文章：《常用CSS縮寫語法總結》
CSS sprites背后的最初想法是減少HTTP請求的數(shù)量以加快頁面的加載時間。Sprite實現(xiàn)這個目標的途徑就是拼合多張圖片到一個單獨的圖片文件中，通常是一個網(wǎng)格格式的圖片。每個單獨的圖片通過切換大的sprite圖片的background-position來顯示。對于CSS代碼來說，使用 sprite技術可以大大的提高代碼的重用度和可維護性，這會明顯的減少CSS的代碼量。
要了解更多關于CSS Sprites，請查看Chris Coyier在CSS-Tricks上的教程:
當然，前端觀察也有一些很有價值的關于CSS Sprites的文章和技巧。
我喜歡在代碼里面使用注釋。我添加的注釋越多，我就能在視覺上更快的定位到代碼中的不同的部分。然而，如果你需要使用少的資源來高度優(yōu)化的CSS，過度的注釋就會吃掉寶貴的字節(jié)。所以，試著去掉所有不必要的注釋并重新格式化那些你必須要保留的注釋到盡可能少的字節(jié)。
當文件大小成為一個大問題的時候，不要將替代字體包進你的font-famly中。去掉所有不必要的累贅，并將你的額外選項減少到一到兩個。
之前:
#container{font-family:Palatino,Georgia,Times,serif;}
之后:
#container{font-family:Palatino,serif;}
關于字體，強烈推薦閱讀一下玉伯寫的《三談 Web 默認字體》，文中提到的幾篇文章也都值得我們?nèi)ラ喿x和思考。
為了減少字節(jié)數(shù)，將所有RGB色值轉換成他們對應的16進制值。這開起來可能沒有太大的意義，但是任何字節(jié)都是值得的！
之前:
#container{color:rgb(131, 100, 219);}
之后:
#container{color:#8364DB;}
查看每一個樣式屬性，并將不需要的硬返回去掉。你也可以去掉最后一個分號。
之前:
#container{ margin:5px; padding:5px 10px 30px 18px;}
之前:
#container{margin:5px;padding:5px 10px 30px 18px}
CSS壓縮工具可以自動完成清理你的代碼的大部分工作。它們中的很多會告訴你你的文件被壓縮的百分比，所以請多嘗試幾個以了解哪個是最好的。
可選項:
可選項 (每個均可選Yes 或No ):
可選項 (每個均可選Yes 或No ):
可選項:
可選項:無
可選項(每個均可選Yes 或No ):
事實上，這就是開源項目css tidy的演示網(wǎng)站。CSS tidy中文版：http://www.isparkle.cn/show/csstidy/。
可選項 (每個均可選Yes 或No ):
可選項:無
可選項:
該工具基于YUI壓縮器，但是會自動將IE的hacks刪除，開發(fā)者給出的解釋是，IE hacks應該以單個文件出現(xiàn)，而不是雜糅在主CSS文件中，這樣會變得難于維護。
可選項: None
YUI Compressor是yahoo前端團隊開發(fā)的一個前端代碼壓縮工具，功能很強大。需要Java運行環(huán)境，可以用java命令手動壓縮CSS和JS文件，也可以用ant在編譯的時候批量壓縮。
淘寶前端團隊的玉伯根據(jù)YUI compressor封裝的Windows平臺壓縮工具，安裝卸載都很簡單。正如功能強大的YUI Compressor，TBCompressor不僅可以壓縮CSS，也可以壓縮JS。
在這里下載。了解更多關于TBCompressor – JS和CSS壓縮工具
另外，推薦閱讀屈超同學的《完善 TBCompressor 對 CSS 文件的壓縮過程》。
國人用delphi 7開發(fā)的一款桌面工具，也是可以壓縮CSS和JS。推薦一下。另外值得一提的是，作者放出了該項目的源代碼。
查看官方介紹及下載。另外，貌似該工具的CSS壓縮部分基于CSS Tidy。
CSS森林站長鬼哥出品的一個基于AIR的工具，有很多很有用的功能，比如多文件合并、合并@import導入文件等。查看詳細介紹。
需要注意的是，該工具對縮寫和屬性合并的支持并不太好，如果能夠增加這些支持，可能會更好吧。
另外一個非常重要的事情是，到目前為止，鬼哥尚未放出該工具，如果你想嘗試一下，可以聯(lián)系他。
page speed其實是Google開發(fā)的一個基于Firebug的firefox插件，主要是用來分析網(wǎng)站前端性能的。但是在page speed的分析結果列表中Minify CSS選項，點開即可看到你的CSS可以壓縮的比例，以及后面提供一個壓縮過的版本，點擊即可查看。唯一不足的就是不能自定義壓縮。
無論多么丑陋的網(wǎng)站，GZIP都是一個對壓縮很多類型的代碼都的確很有用的工具。它或許并不是最簡單的壓縮方法，而且對初學者可能還會有些迷惑。查看這個教程以獲取更多關于使用GZIP壓縮你的樣式的信息。
正如我前面說的，這些方法中的一些可能看起來有些過度或毫無意義。關鍵是看大局。雖然這些技巧中的任何一個可能的只有幾乎是微不足道的影響，結合這些技術中的幾個或全部就可以對你的CSS文件的大小形成巨大的影響。
另外，如果你了解到有其它的好用的壓縮工具，歡迎與我們分享哦～～
另外附武林網(wǎng)的css在線壓縮工具
http://www.survivalescaperooms.com/tools/cssyasuo.shtml
http://www.survivalescaperooms.com/csstidy/css_optimiser.php?lang=zh
新聞熱點
疑難解答
