學(xué)習(xí)編寫(xiě)簡(jiǎn)練、優(yōu)化的CSS需要大量的實(shí)踐和一種不自覺(jué)的強(qiáng)迫性清潔的渴望。然而讓你的CSS保持整潔并不僅僅是你對(duì)清潔的瘋狂的心理需求，尤其對(duì)于大型網(wǎng)站來(lái)說(shuō)，這會(huì)使頁(yè)面加載更快。更快的加載時(shí)間就等同于提高可用性和較高的用戶(hù)滿(mǎn)意度。

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

本文將整理集中你可以用來(lái)優(yōu)化你的CSS的技術(shù)，以及一些可以自動(dòng)壓縮你的代碼的在線(xiàn)和桌面壓縮工具。

壓縮還是不壓縮

在我們討論如何壓縮CSS之前，需要注意一下在壓縮和代碼的易讀性上常常要有個(gè)平衡。很多編碼者以其CSS組織清晰為傲，而且并不希望自己的代碼被通過(guò)壓縮器去掉注釋和斷行。作為一個(gè)設(shè)計(jì)師，你應(yīng)該分析你所編寫(xiě)的代碼的目標(biāo)。如果你要?jiǎng)?chuàng)建一個(gè)小的只需要幾行CSS的網(wǎng)站，可能就沒(méi)有必要做額外的壓縮。同樣，如果你在編寫(xiě)需要和一個(gè)開(kāi)放團(tuán)隊(duì)分享的代碼，插入額外的注釋和斷行可以節(jié)省你的同事的大量時(shí)間并獲得他們真心的感謝。然而，如果你在設(shè)計(jì)一個(gè)需要大量CSS的大型網(wǎng)站，你肯定要注意你的文件大小并進(jìn)你所能保持其最小。

可能在尋找壓縮和可能性之間的完美結(jié)合上面需要花一些時(shí)間，但是它們都值得挖掘而且實(shí)現(xiàn)它們的平衡可以讓你的工作變得容易很多。同時(shí)，很明顯并不是說(shuō)壓縮一定會(huì)導(dǎo)致可讀性的降低。很多可用于壓縮代碼的技術(shù)都能生成更好更有組織的代碼。

考慮到這一點(diǎn)兒，讓我們開(kāi)始了解一些技術(shù)已保持CSS文件最小化吧。

空白樣式定義

讓我們從明顯的開(kāi)始。如果你有一個(gè)空白樣式，丟掉它。不要借口稍后或許會(huì)用到，你也知道它們是雜亂的。除非你有一個(gè)合理的理由，否則不要添加它們。

縮寫(xiě)

CSS縮寫(xiě)是一種將多行CSS合并到單行的方法。 養(yǎng)成使用你知道的所有縮寫(xiě)技巧的習(xí)慣可以明顯的減少你最終寫(xiě)出的代碼的行數(shù)。這里是個(gè)例子：

長(zhǎng)寫(xiě)版本:

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

縮寫(xiě)版本:

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

了解更多CSS縮寫(xiě)技巧，可以訪(fǎng)問(wèn)下面的文章：