學習編寫簡練、優(yōu)化的CSS需要大量的實踐和一種不自覺的強迫性清潔的渴望。然而讓你的CSS保持整潔并不僅僅是你對清潔的瘋狂的心理需求,尤其對于大型網(wǎng)站來說,這會使頁面加載更快。更快的加載時間就等同于提高可用性和較高的用戶滿意度。
很多人都有代碼潔癖。這不是件壞事。
本文將整理集中你可以用來優(yōu)化你的CSS的技術(shù),以及一些可以自動壓縮你的代碼的在線和桌面壓縮工具。
壓縮還是不壓縮
在我們討論如何壓縮CSS之前,需要注意一下在壓縮和代碼的易讀性上常常要有個平衡。很多編碼者以其CSS組織清晰為傲,而且并不希望自己的代碼被通過壓縮器去掉注釋和斷行。作為一個設(shè)計師,你應該分析你所編寫的代碼的目標。如果你要創(chuàng)建一個小的只需要幾行CSS的網(wǎng)站,可能就沒有必要做額外的壓縮。同樣,如果你在編寫需要和一個開放團隊分享的代碼,插入額外的注釋和斷行可以節(jié)省你的同事的大量時間并獲得他們真心的感謝。然而,如果你在設(shè)計一個需要大量CSS的大型網(wǎng)站,你肯定要注意你的文件大小并進你所能保持其最小。
可能在尋找壓縮和可能性之間的完美結(jié)合上面需要花一些時間,但是它們都值得挖掘而且實現(xiàn)它們的平衡可以讓你的工作變得容易很多。同時,很明顯并不是說壓縮一定會導致可讀性的降低。很多可用于壓縮代碼的技術(shù)都能生成更好更有組織的代碼。
考慮到這一點兒,讓我們開始了解一些技術(shù)已保持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縮寫技巧,可以訪問下面的文章: