【css】教你如何寫出高效整潔的CSS代碼——CSS最佳化

文章目錄

• 1、使用reset但非全域reset
• 2、良好的命名習慣
• 3、代碼縮寫
• 4、利用CSS的繼承
• 5、使用多重選取器
• 6、適當的代碼注釋
• 7、給你的CSS代碼排序
• 8、保持CSS的可讀性
• 9、選擇更優的樣式屬性值
• 10、使用<link>代替@import
• 11、使用外部樣式表
• 12、避免使用CSS運算式（Expression）
• 13、代碼壓縮

CSS寫起來並不難，但在大型項目中，就變得難以管理，特別是不同的人在CSS書寫風格上稍有不同，團隊上就更加難以溝通，為此總結了一些如何?高效整潔的CSS代碼原則。

CSS最佳化的原則

1、不影響頁面的布局

2、去掉不必要的樣式

3、合并相同的樣式

4、儘可能縮小樣式的大小

CSS樣式中常見的問題

1、除body之外的樣式重寫了與body一樣的樣式，如：

1 body{font-size:12px;color:red;}  2 h1{font-size:16px;color:red;}

h1在頁面解析的時候已經繼承了body中的屬性，所以color:red;就沒有必要再次重寫了。

2、0加單位與不加單位意義一樣，如：

1 h1{margin:0px;}2 h1{margin:0;}

上面兩個樣式完全等價，其中下面樣式寫法更好。

3、完全相同的樣式沒有必要寫兩次。如：

1 h1{color:red;}2 h2{color:red;}

上面兩個樣式一樣，我們可以進行合并：

1 h1,h2{color:red;}

4、一些樣式的縮寫，如margin，padding

1 h1{margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;}

上面的樣式可以進行縮寫：

1 h1{margin:5px;}

5、顏色可以簡寫，如：

1 h1{color:#000000;}

上面的樣式可以簡寫成：

1 h1{color:#000;}

還可以繼續簡寫成：

1 h1{color:black;}

CSS最佳化主要的好處

1、提高CSS檔案的易讀性

2、減小CSS檔案的大小

3、能夠相對的加快瀏覽器的載入速率

實現高效整潔的CSS代碼原則1、使用reset但非全域reset

不同瀏覽器元素的預設屬性有所不同，使用reset可重設瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。但需要注意的是，請不要使用全域reset：

1 *{margin:0;padding:0;}

這不僅僅因為它是緩慢和低效率的方法，而且還會導致一些不必要的元素也重設了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。reset並不是一成不變的，具體還需要根據項目的不同需求做適當的修改，以達到瀏覽器的相容和操作上的便利性。這是我使用的reset.css。

2、良好的命名習慣

無疑亂七八糟或者無語義命名的代碼，誰看了都會抓狂。就像這樣的代碼：

1 .aaabbb{margin:2px;color:red;}

我想即使初學者，也不至於會在實際項目中如此命名一個class。

3、代碼縮寫

CSS代碼縮寫可以提高寫代碼的速度，精簡代碼量。在CSS裡面有不少可以縮寫的屬性，包括margin，padding，border，font，background和顏色值，如果學會了代碼縮寫，原本這樣的代碼：

1 p{  2     font-family:Arial,Helvetica,sans-serif;  3     font-size:1.2em;  4     line-height:1.4em;  5     padding-top:5px;  6     padding-bottom:10px;  7     padding-left:5px;  8 }

就可以縮寫為：

1 p{  2     font:1.2em/1.4em Arial,Helvetica,sans-serif;  3     padding:5px 0 10px 5px;  4 }

具體的CSS縮寫規則，請點擊下面的地址：

http://www.cnblogs.com/yjzhu/archive/2012/11/05/2754877.html

4、利用CSS的繼承

如果頁面中父元素的多個子項目使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓他們繼承這些CSS樣式。這樣你可以很好的維護你的代碼，並且還可以減少代碼量。那麼本來這樣的代碼：

1 #content li{color:red;}2 #content p{color:red;}3 #content h1{color:red;}

就可以簡寫成：

1 #content{color:red;}

5、使用多重選取器

你可以合并多個CSS選取器為一個，如果他們有共同的樣式的話。這樣做不但代碼簡潔且可為你節省時間和空間。如：

1 h1{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}2 h2{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}3 h3{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}

上面三個樣式可以合并

h1,h2,h3{font-family:Arial, Helvetica, sans-serif;font-weight:normal;}

6、適當的代碼注釋

代碼注釋可以讓別人更容易讀懂你的代碼，且合理的組織代碼注釋，可使得結構更加清晰。

你可以選擇做的樣式表的開始添加目錄：

1 /*------------------------------------   2      1. Reset   3      2. Header   4      3. Content   5      4. SideBar   6      5. Footer   7 ----------------------------------- */

如此你代碼的結構就一目瞭然，你可以容易的尋找和修改代碼。

而對於代碼的主內容，也應適當的加以劃分，甚至在有必要的地方在對代碼加以注釋說明，這樣也有利於團隊開發：

 1 /***  Header  ***/ 2 #header{height:145px;position:relative;} 3 #header h1{width:324px;margin:45px 0 0 20px;float:left;height:72px;} 4 /***  Content  ***/ 5 #content{background:#fff;width:650px;float:left;min-height:600px;overflow:hidden;} 6 #content h1{color:#F00}/* 設定字型顏色 */ 7 #content .posts{overflow:hidden;} 8 #content .recent{margin-bottom:20px;border-bottom:1px solid #f3f3f3;position:relative;overflow:hidden;} 9 /***  Footer  ***/10 #footer{clear:both;padding:50px 5px 0;overflow:hidden;}    11 #footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font-size:1.1em;}

7、給你的CSS代碼排序

如果代碼中的屬性都能按照字母排序，那尋找修改的時候就能更加快速：

 1 /*** 樣式屬性按字母排序 ***/     2 div{     3     background-color:#3399cc;     4     color:#666;     5     font:1.2em/1.4em Arial, Helvetica, sans-serif;     6     height:300px;     7     margin:10px 5px;     8     padding:5px 0 10px 5px;     9     width:30%;    10     z-index:10;    11 }

8、保持CSS的可讀性

書寫可讀的CSS將會使得更容易尋找和修改樣式。對於以下兩種情況，哪種可讀性更高，我想不言而明。

 1 /*** 每個樣式屬性寫一行 ***/     2 div{     3     background-color:#3399cc;     4     color:#666;     5     font: 1.2em/1.4em Arial, Helvetica, sans-serif;     6     height:300px;     7     margin:10px 5px;     8     padding:5px 0 10px 5px;     9     width:30%;    10     z-index:10;    11 }    12 /*** 所有的樣式屬性寫在同一行 ***/    13 div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

當對於一些樣式屬性較少的選取器，我會寫到一行：

1 /*** 選取器屬性少的寫在同一行 ***/2 div{background-color:#39c;color:#666;}

對於這個規則並非硬性規定，但無論採用哪種寫法，我的建議是始終保持代碼一致。屬性多的分行寫，屬性少於3個可以寫一行。

9、選擇更優的樣式屬性值

CSS中有些屬性採用不同的屬性值，雖然達到的效果差不多，當效能上卻存在著差異，如：

區別在於border:0把border設為0px，雖然在頁面上看不見，但按border預設值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了記憶體值。

而border:none把border設為“none”即沒有，瀏覽器解析“none”時將不作出渲染動作，即不會消耗記憶體值。所以建議使用border:none;

同樣的，display:none隱藏物件瀏覽器不作渲染，不佔用記憶體。而visibility:hidden則會。

10、使用<link>代替@import

@import不屬於XHTML標籤，也不是Web標準的一部分，它對於較早期的瀏覽器安全色也不高，並且對於網站的效能有某些負面的影響。所以，請避免使用@import

11、使用外部樣式表

這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部檔案可以提高頁面速度，因為CSS檔案都能在瀏覽器中產生緩衝。內建在HTML文檔中的CSS則會在每次請求中隨HTML文檔重新下載。所以，在實際應用中，沒有必要把CSS代碼內建在HTML文檔中。

12、避免使用CSS運算式（Expression）

CSS運算式是動態設定CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支援CSS運算式。下面的例子中，使用CSS運算式可以實現隔一個小時切換一次背景顏色：

1 div{background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );}

如上所示，expression中使用了JavaScript運算式。CSS屬性根據JavaScript運算式的計算結果來設定。

運算式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS運算式增加一個計數器可以跟蹤運算式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。

如果必須使用CSS運算式，一定要記住它們要計算成千上萬次並且可能會對你頁面的效能產生影響。所以，在非不得已，請避免使用CSS運算式。

13、代碼壓縮

當你決定把網站項目部署到網路上，那你就要考慮對CSS進行壓縮，出去注釋和空格，以使得網頁載入得更快。壓縮代碼，可以採用一些工具，如YUI Compressor利用它可精簡CSS代碼，減少檔案大小，以獲得更高的載入速度。