CSS精簡壓縮：技巧與工具

學習編寫簡練、優化的CSS需要大量的實踐和一種不自覺的強迫性清潔的渴望。然而讓你的CSS保持整潔並不僅僅是你對清潔的瘋狂的心理需求，尤其對於大型網站來說，這會使頁面加載更快。更快的載入時間就等於提高可用性和較高的使用者滿意度。

很多人都有代碼潔癖。這不是件壞事。

本文將整理集中你可以用來優化你的CSS的技術，以及一些可以自動壓縮你的程式碼的線上和桌面壓縮工具。

壓縮還是不壓縮

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

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

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

空白樣式定義

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

縮寫

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

長寫版本:

 #container {
    padding-top : 5px
    padding-right : 10px
    padding-bottom : 30px
    padding-left : 18px
}

縮寫版本:

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

了解更多CSS縮寫技巧，可以造訪下面的文章：

CSS Sprites

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

要了解更多關於CSS Sprites，請查看Chris Coyier在CSS-Tricks上的教程:

當然，前端觀察也有一些很有價值的CSS Sprites的文章和技巧。

減少註釋

我喜歡在程式碼裡面使用註解。我添加的註解越多，我就能在視覺上更快的定位到程式碼中的不同的部分。然而，如果你需要使用少的資源來高度優化的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 ;
}

之後:

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