CSS代碼精簡優化—附在線壓縮工具

網站優化是一門比較深奧的學問，網站代碼優化也尤為重要，如果網站流量一大，一個小小的CSS文件也是會影響網站速度的。學習如何編寫優化、簡練的CSS是需要大量的實踐經驗和一種不自覺的強迫性思想。更快的網站加載實踐能夠提高網站信任度和較高的用戶體驗。很多編寫代碼的時候都有潔癖，當然，這從很多角度講，很重要。

本文介紹部分優化CSS代碼的技術，包括一些能夠自動壓縮CSS代碼的在線和本地工具。

刪除所有空白樣式
首先，你要有一個清晰的理念：如果你有一個空白樣式，那么丟棄它。你不能找任何借口說，稍后會用到它，或許你也發現他們是雜亂無章的，除非你有很多合理的理由，請不要添加他們。

簡寫

CSS縮寫是CSS規則中定義過的一種方法，例如把font-family和font-size放入font樣式中。請不要小看這幾個字符，往往一個大型網站，這小小的改動，能夠節省上百GB的流量。以下我再舉個例子：

長寫版本:

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

縮寫版本:

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

如果你有興趣，可以參考以下文章：http://www.dustindiaz.com/css-shorthand/

減少注釋

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

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

其實這一點很簡單，考慮到用戶的類型，在中國，宋體永遠是主流字體，把font-family的首選項寫為：宋體，如果你覺得主流字體已經變成微軟雅黑，那么在第二選項寫入微軟雅黑。其他可以添加一些必要的英文字體就行，

舉例說明：之前:

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

之后:

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

去掉斷行

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

之前:

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

之后:

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

使用16進制色彩

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

之前:

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

之后:

#container{color:#8364DB;}

接下來分享幾個不錯的在線CSS壓縮網站：
1.Clean CSS http://www.cleancss.com/
2.Lottery Post http://www.lotterypost.com/css-compress.aspx
3.CSS Optimizer http://www.cssoptimiser.com/
4.Arantius http://tools.arantius.com/css-compressor
5.CSS Compressor http://www.csscompressor.com/

總結

通過以上介紹的部分壓縮CSS方法，想必大家都對網站CSS壓縮有一個定義，這些方法可能對很多人來說，都是可有可無，但是要處理一個大型網站，這是必須的，需要每個人都能把網站代碼寫得端正，而不是在真正遇到困難的時候去后悔很多東西沒做。

西安做網站公司 - 日月行網絡，負責貴公司的整體UI設計，微信公眾號開發，小程序，網站管理系統開發，非常感謝貴公司對我們的信任和支持，我們會一如既往的為您服務！