編寫出色CSS代碼的13個建議

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

    1. 使用Reset但並不是全局Reset

    不一樣瀏覽器元素的默認屬性有所不一樣，使用Reset可重置瀏覽器元素的一些默認屬性，以達到瀏覽器的兼容。但須要注意的是，請不要使用全局Reset：

    *{ margin:0; padding:0; }

　　這不只僅由於它是緩慢和低效率的方法，並且還會致使一些沒必要要的元素也重置了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的作法。我跟Eric Meyer的觀點相同，Reset並非一成不變的，具體還須要根據項目的不一樣需求作適當的修改，以達到瀏覽器的兼容和操做上的便利性。我使用的Reset以下:

01	/** 清除內外邊距 **/

02	body, h1, h2, h3, h4, h5, h6, hr, p,

03	blockquote, /* structural elements 結構元素 */

04	dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

05	pre, /* text formatting elements 文本格式元素 */

06	form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */

07	th, td, /* table elements 表格元素 */

08	img/* img elements 圖片元素 */{

09	border:medium none;

10	margin: 0;

11	padding: 0;

12

}

13	/** 設置默認字體 **/

14	body,button, input, select, textarea {

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

16

}

17	h1, h2, h3, h4, h5, h6 { font-size: 100%; }

18	em{font-style:normal;}

19	/** 重置列表元素 **/

20	ul, ol { list-style: none; }

21	/** 重置超連接元素 **/

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

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

24	/** 重置圖片元素 **/

25	img{ border:0px;}

26	/** 重置表格元素 **/

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

　　2. 良好的命名習慣

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

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

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

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

　　問題在於若是你須要把全部本來紅色的字體改爲藍色，那修改後就樣式就會變成：

    .red{color:bule;} 

　　這樣的命名就會很讓人費解，一樣的命名爲.leftBar的側邊欄若是須要修改爲右側邊欄也會很麻煩。因此，請不要使用元素的特性（顏色，位置，大小等）來命名一個class或id，您能夠選擇意義的命名如：        #navigation{...}，.sidebar{...}，.postwrap{...}    

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

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

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

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

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

　　那麼對於這樣一個段落

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

　　若是須要把這個段落由原先的左對齊修改成右對齊，那麼只須要修改它的className就爲alignright就能夠了。

　　3. 代碼縮寫

　　CSS代碼縮寫能夠提升你寫代碼的速度，精簡你的代碼量。在CSS裏面有很多能夠縮寫的屬性，包括margin，padding，border，font，background和顏色值等，若是您學會了代碼縮寫，本來這樣的代碼：

1

li{

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

li{

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

3	padding:5px 0 10px 5px;

4

}

　　若是您想更瞭解這些屬性要怎麼縮寫，能夠參考《經常使用CSS縮寫語法總結》或者下載CSS-Shorthand-Cheat-Sheet.pdf 。

　　4. 利用CSS繼承

　　若是頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你能夠很好的維護你的代碼，而且還能夠減小代碼量。那麼原本這樣的代碼：

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

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

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

    就能夠簡寫成：

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

　　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; }

　　能夠合併爲

1	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	----------------------------------- */

　　如此你代碼的結構就一目瞭然，你能夠容易的查找和修改代碼。

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

01	/***    Header  ***/

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

03	#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

04

05	/***    Content ***/

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

07	#content h1{color:#F00}/* 設置字體顏色 */

08	#content .posts{ overflow:hidden; }

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

10

11	/***    Footer  ***/

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

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

　　7. 給你的CSS代碼排序

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

01	/*** 樣式屬性按字母排序 ***/

02

div{

03	background-color:#3399cc;

04	color:#666;

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

06	height:300px;

07	margin:10px 5px;

08	padding:5px 0 10px 5px;

09	width:30%;

10	z-index:10;

11

}

　　8. 保持CSS的可讀性

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

01	/*** 每一個樣式屬性寫一行 ***/

02

div{

03	background-color:#3399cc;

04	color:#666;

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

06	height:300px;

07	margin:10px 5px;

08	padding:5px 0 10px 5px;

09	width:30%;

10	z-index:10;

11

}

12

13	/*** 全部的樣式屬性寫在同一行 ***/

14	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:#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文檔中：

1	<style type="text/css" >

2	#container{ .. }

3	#sidebar{ .. }

4

</style>

或

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

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

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

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

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

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

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

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

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

　　13. 代碼壓縮

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

　　利用它可精簡CSS代碼，減小文件大小，以得到更高的加載速度。