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 並不是一成不變的，具體還需要根據專案的不同需求做適當的修改，以達到瀏覽器的相容和操作上的便利性。這是我使用的 

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 縮寫規則，請點選下面的地址：

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 屬性的強大（但危險）方法。ie 從第 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 程式碼，減少檔案大小，以獲得更高的載入速度。