很多人都有代碼潔癖。這不是件壞事。
本文將整理集中你可以用來優(yōu)化你的CSS的技術(shù)，以及一些可以自動(dòng)壓縮你的代碼的在線和桌面壓縮工具。
在我們討論如何壓縮CSS之前，需要注意一下在壓縮和代碼的易讀性上常常要有個(gè)平衡。很多編碼者以其CSS組織清晰為傲，而且并不希望自己的代碼被通過壓縮器去掉注釋和斷行。作為一個(gè)設(shè)計(jì)師，你應(yīng)該分析你所編寫的代碼的目標(biāo)。如果你要?jiǎng)?chuàng)建一個(gè)小的只需要幾行CSS的網(wǎng)站，可能就沒有必要做額外的壓縮。同樣，如果你在編寫需要和一個(gè)開放團(tuán)隊(duì)分享的代碼，插入額外的注釋和斷行可以節(jié)省你的同事的大量時(shí)間并獲得他們真心的感謝。然而，如果你在設(shè)計(jì)一個(gè)需要大量CSS的大型網(wǎng)站，你肯定要注意你的文件大小并進(jìn)你所能保持其最小。
可能在尋找壓縮和可能性之間的完美結(jié)合上面需要花一些時(shí)間，但是它們都值得挖掘而且實(shí)現(xiàn)它們的平衡可以讓你的工作變得容易很多。同時(shí)，很明顯并不是說壓縮一定會(huì)導(dǎo)致可讀性的降低。很多可用于壓縮代碼的技術(shù)都能生成更好更有組織的代碼。
考慮到這一點(diǎn)兒，讓我們開始了解一些技術(shù)已保持CSS文件最小化吧。
讓我們從明顯的開始。如果你有一個(gè)空白樣式，丟掉它。不要借口稍后或許會(huì)用到，你也知道它們是雜亂的。除非你有一個(gè)合理的理由，否則不要添加它們。
CSS縮寫是一種將多行CSS合并到單行的方法。 養(yǎng)成使用你知道的所有縮寫技巧的習(xí)慣可以明顯的減少你最終寫出的代碼的行數(shù)。這里是個(gè)例子：
長(zhǎng)寫版本:
縮寫版本:
了解更多CSS縮寫技巧，可以訪問下面的文章：
推薦閱讀阿捷的文章：《常用CSS縮寫語(yǔ)法總結(jié)》
CSS sprites背后的最初想法是減少HTTP請(qǐng)求的數(shù)量以加快頁(yè)面的加載時(shí)間。Sprite實(shí)現(xiàn)這個(gè)目標(biāo)的途徑就是拼合多張圖片到一個(gè)單獨(dú)的圖片文件中，通常是一個(gè)網(wǎng)格格式的圖片。每個(gè)單獨(dú)的圖片通過切換大的sprite圖片的background-position來顯示。對(duì)于CSS代碼來說，使用 sprite技術(shù)可以大大的提高代碼的重用度和可維護(hù)性，這會(huì)明顯的減少CSS的代碼量。
要了解更多關(guān)于CSS Sprites，請(qǐng)查看Chris Coyier在CSS-Tricks上的教程:
新聞熱點(diǎn)
疑難解答
圖片精選
