高效整潔CSS代碼原則

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

1 . 使用Reset但并非全局Reset

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

view source

print ?

*{ margin : ; padding : ; }

　　這不僅僅因為它是緩慢和低效率的方法，而且還會導緻一些不必要的元素也重置了外邊距和内邊距。在此建議參考YUI Reset 和Eric Meyer 的做法。我跟Eric Meyer的觀點相同，Reset并不是一成不變的，具體還需要根據項目的不同需求做适當的修改，以達到浏覽器的相容和操作上的便利性。我使用的Reset如下:

view source

print ?

body, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , hr, p,

blockquote,

dl, dt, dd, ul, ol, li,

pre ,

form, fieldset, legend, button, input, textarea,

th, td,

img {

border : medium none ;

margin : ;

padding : ;

}

body,button, input, select, textarea {

font : 12px / 1.5 '宋體' , tahoma , Srial, helvetica , sans-serif ;

}

h 1 , h 2 , h 3 , h 4 , h 5 , h 6 { font-size : 100% ; }

em{ font-style : normal ;}

ul, ol { list-style : none ; }

a { text-decoration : none ; color : #333 ;}

a:hover { text-decoration : underline ; color : #F40 ; }

img{ border : 0px ;}

table { border-collapse : collapse ; border-spacing : ; }

2 . 良好的命名習慣

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

view source

print ?

.aaabb{ margin : 2px ; color : red ;}

　　我想即使是初學者，也不至于會在實際項目中如此命名一個class，但有沒有想過這樣的代碼同樣是很有問題的：

view source

print ?

< h1 >My name is < span class = "red blod" >Wiky</ span ></ h1 >

　　問題在于如果你需要把所有原本紅色的字型改成藍色，那修改後就樣式就會變成：

view source

print ?

.red{color:bule;}

　　這樣的命名就會很讓人費解，同樣的命名為.leftBar的側邊欄如果需要修改成右側邊欄也會很麻煩。是以，請不要使用元素的特性（顔色，位 置，大小等）來命名一個class或id，您可以選擇意義的命名 如：#navigation{...}，.sidebar{...}，.postwrap{...}

　　這樣，無論你如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的聯系。

　　另外還有一種情況，一些固定的樣式，定義後就不會修改的了，那你命名時就不用擔憂剛剛說的那種情況，如

view source

print ?

.alignleft{ float : left ; margin-right : 20px ;}

.alignright{ float : right ; text-align : right ; margin-left : 20px ;}

.clear{ clear : both ; text-indent : -9999px ;}

　　那麼對于這樣一個段落

view source

print ?

< p class = "alignleft" >我是一個段落！</ p >

　　如果需要把這個段落由原先的左對齊修改為右對齊，那麼隻需要修改它的className就為alignright就可以了。

3 . 代碼縮寫

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

view source

print ?

li{

font-family : Arial , Helvetica , sans-serif ;

font-size : 1.2em ;

line-height : 1.4em ;

padding-top : 5px ;

padding-bottom : 10px ;

padding-left : 5px ;

}

就可以縮寫為：

view source

print ?

li{

font : 1.2em / 1.4em Arial , Helvetica , sans-serif ;

padding : 5px 10px 5px ;

}

　　如果您想更了解這些屬性要怎麼縮寫，可以參考《常用CSS縮寫文法總結 》或者下載下傳CSS-Shorthand-Cheat-Sheet.pdf 。

4 . 利用CSS繼承

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

view source

print ?

#container li{ font-family :Georgia, serif ; }

#container p{ font-family :Georgia, serif ; }

#container h 1 { font-family :Georgia, serif ; }

就可以簡寫成：

view source

print ?

#container{ font-family :Georgia, serif ; }

5 . 使用多重選擇器

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

view source

print ?

h 1 { font-family : Arial , Helvetica , sans-serif ; font-weight : normal ; }

h 2 { font-family : Arial , Helvetica , sans-serif ; font-weight : normal ; }

h 3 { font-family : Arial , Helvetica , sans-serif ; font-weight : normal ; }

可以合并為

view source

print ?

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

6 . 适當的代碼注釋

代碼注釋可以讓别人更容易讀懂你的代碼，且合理的組織代碼注釋，可使得結構更加清晰。你可以選擇做的樣式表的開始添加目錄:

view source

print ?

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

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

view source

print ?

#header{ height : 145px ; position : relative ; }

#header h 1 { width : 324px ; margin : 45px 20px ; float : left ;  height : 72px ;}

#content{ background : #fff ; width : 650px ; float : left ; min-height : 600px ; overflow : hidden ;}

#content h 1 { color : #F00 }

#content .posts{ overflow : hidden ; }

#content .recent{ margin-bottom : 20px ; border-bottom : 1px solid #f3f3f3 ; position : relative ; overflow : hidden ; }

#footer{ clear : both ; padding : 50px 5px ; overflow : hidden ;}

#footer h 4 { color : #b99d7f ; font-family : Arial , Helvetica , sans-serif ; font-size : 1.1em ; }

7 . 給你的CSS代碼排序

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

view source

print ?

div{

background-color : #3399cc ;

color : #666 ;

font : 1.2em / 1.4em Arial , Helvetica , sans-serif ;

height : 300px ;

margin : 10px 5px ;

padding : 5px 10px 5px ;

width : 30% ;

z-index : 10 ;

}

8 . 保持CSS的可讀性

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

view source

print ?

div{

background-color : #3399cc ;

color : #666 ;

font : 1.2em / 1.4em Arial , Helvetica , sans-serif ;

height : 300px ;

margin : 10px 5px ;

padding : 5px 10px 5px ;

width : 30% ;

z-index : 10 ;

}

div{ background-color : #3399cc ; color : #666 ; font : 1.2em / 1.4em Arial , Helvetica , sans-serif ;  height : 300px ; margin : 10px 5px ; padding : 5px 10px 5px ; width : 30% ; z-index : 10 ; }

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

view source

print ?

div{ background-color : #3399cc ; 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 》。是以，請避免使用@import

11 . 使用外部樣式表

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

view source

print ?

< style type = "text/css" >

#container{ .. }

#sidebar{ .. }

</ style >

或

< li style = "font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>導入外部樣式表：

view source

print ?

< link rel = "stylesheet" type = "text/css" href = "css/styles.css" />

12 . 避免使用CSS表達式（Expression）

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

view source

print ?

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

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

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

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

13 . 代碼壓縮

　　當你決定把網站項目部署到網絡上，那你就要考慮對CSS進行壓縮，出去注釋和空格，以使得網頁加載得更快。壓縮您的代碼，可以采用一些工具，如YUI Compressor

利用它可精簡CSS代碼，減少檔案大小，以獲得更高的加載速度。

14 . 總結

　　在本文 中，我力圖更詳盡的總結書寫更高效的CSS代碼的原則，但鑒于本人見識和精力有限，我還是希望這些原則能幫助您更好的書寫和管理您的CSS代碼，不知您又是如何書寫CSS的，是否也有一些想要分享的技巧？給我留言吧謝謝~

轉自http://www.cnblogs.com/wiky/archive/2010/04/17/better-css-code.html