上一篇《前端代碼標準最佳實踐：javascript》發表後，大家討論還是很熱烈，從側面體現了前端工程師對寫標準的前端代碼的重視程度很高。這些最佳標準實踐並不是那個權威組織發佈的，而是由大量的前端工程師們在實踐過程中的經驗總結，目的在於提高代碼的可讀性，可維護性和性能。那麼接着上一篇，我們再來談談CSS代碼的一些標準實踐。
1，命名
和其他語言規範一樣，css的命名也講究命名要有意義，命名要儘可能短但是要足夠表達含義；命名的詞用連字符連接。
不規範的命名：
|
1
2
3
4
5
6
|
#navigation{}.demoimage{}.error_status{} |
規範的命名：
|
1
2
3
4
5
6
|
#nav{}.demo-image{}.error-status{} |
2, css選擇器
不同的標籤類型儘可能不用相同的css類名；儘可能不用標籤類型選擇器，用css類名和ID足夠定義css，因爲ID是可以唯一確定Dom元素的，而css類是不推薦用於不同的標籤的；另外應該少用ID選擇器定義，因爲ID的唯一性使得定義的css無法重用。
不規範定義：
|
1
2
3
4
|
ul#menus{}div.info{} |
規範定義：
|
1
2
3
4
|
.main-menus{}.info{} |
3，屬性名稱和值的定義精簡
css的某些屬性定義可以可以分拆爲各個獨立項，比如padding，border, margin, background, font等，雖然分拆定義的可讀性會好一些，但是就目前的經驗來看，前端工程師們對這些常用的css理解程度足夠好，合併後的定義不會對可讀性帶來影響，反而代碼更簡潔；此外對屬性值爲0的單位可以省略，在0後面添加入px em cm等單位是毫無意義的；對小數值可以省略小數點前的0；url值兩端的引號可以省略。
不規範的定義：
|
1
2
3
4
5
6
7
8
9
10
|
border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;margin: 0.8em;background: #00FF00 url('bgimage.gif') no-repeat fixed top; |
規範定義：
|
1
2
3
4
5
|
border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;margin: .8em;background: #00FF00 url(bgimage.gif) no-repeat fixed top; |
4，css代碼的格式
漂亮統一的代碼格式可以提高代碼的可讀性和可維護性，css的最佳代碼格式主要有以下幾點：定義順序以字母序排列，不考慮瀏覽器前綴；定義以分號結束；屬性名稱定義的分號後添加一個空格；多個選擇器定義時，每個定義單獨佔一行。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/*css定義順序以字母序排列；結束用分號；屬性名稱與值之間添加空格*/background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em;/*多個選擇器定義時，每個選擇器單獨佔用一行*/h1,h2,h3 { font-weight: normal; line-height: 1.2;} |
5，避免寫兼容某個瀏覽器的css代碼
避免寫特定瀏覽器兼容代碼，這裏說的特定瀏覽器主要指的是萬惡的IE系列瀏覽器，IE6，7尤爲嚴重。碰到瀏覽器兼容問題，首先考慮的是能否換一種其它的解決方案，如果沒有合適的解決方案，記得單獨寫一個css文件給這些特定的瀏覽器，不要把兼容代碼和常規代碼混合，這樣方便代碼的維護，如果後期不支持這些老舊瀏覽器，可以直接刪除這些單獨的css文件即可。
|
1
2
3
4
5
6
|
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]--> |
6，記住塊元素和行內元素的區別，避免寫無用的css代碼
塊級元素顯示會獨佔一行，而行內元素不會獨佔一行。常見的塊級元素有：div p ul ol table h1~h6 等；行內元素有：a em label span strong 等。塊級元素的display默認樣式是block，而行內元素是inline，可以通過重新定義display來互轉塊級元素和行內元素。但是記住以下的css樣式對行內元素是無效的：width height 和垂直方向設置的margin padding，所以避免給行內元素定義這些無用的樣式。
7，記住css定義的權重
css的選擇器是有權重的，當有多個樣式時，權重高的樣式會起作用。說一個插曲，前段時間面試了不少前端工程師，問得最多的一個問題就是css權重問題，很可惜的是知道css權重的不多。以下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，以下例子是演示各種定義的權重值：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/*權重爲1*/div{}/*權重爲10*/.class1{}/*權重爲100*/#id1{}/*權重爲100+1=101*/#id1 div{}/*權重爲10+1=11*/.class1 div{}/*權重爲10+10+1=21*/.class1 .class2 div{} |
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現，因爲光是靠前後的樣式定義來影響最終的樣式是不靠譜的，也會給後期的維護埋下一個雷區；另外爲了代碼的重用性，應儘可能定義小的權重，這和不推薦使用id來定義樣式是一樣的道理。
8，使用css reset
各個瀏覽器對不同的標籤有其不同的內置的樣式，爲了使得在不同的瀏覽器下標籤的表現相同，可以定義一個單獨的base.css文件，重新定義各種標籤的默認樣式。另外推薦的css文件組織是：定義一個base.css，用於css reset，定義一個common.css，用於定義各種公用css類。這裏有一份base.css，其實是以上提到的base.css和common.css的合併，分享給大家：base.css
9，多組合少繼承
這種設計方式越來越受到大家的歡迎，各種前端框架中也能看到大量這樣的設計。設計的核心思想是：把css定義中的固定部分和可變部分分開定義，使得代碼達到最大程度的重用，這樣的結果是增加了元素上添加的css類個數，但是提高了代碼的維護性和可讀性。如下的例子代碼來自bootstrap的按鈕樣式定義
按鈕有一個固定的基礎樣式btn
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.btn { display: inline-block; *display: inline; padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; font-size: 13px; line-height: 18px; *line-height: 20px; color: #333333; ... *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);} |
在此基礎上定義各種按鈕的特定樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
.btn.disabled,.btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.btn-large [class^="icon-"] { margin-top: 1px;}.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px;}.btn-small [class^="icon-"] { margin-top: -1px;}.btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px;} |
另外再推薦一下bootstrap框架，在github中排名第一的前端框架，出自於twitter。
10，雪碧圖(css sprite)
這項技術是將多張背景圖合併爲一張，然後通過設置不同的background-position屬性來展示不同的背景。現在越來越多的網站採用這項技術，例如：亞馬遜，蘋果，Google, YouTube等，我們目前的項目MSB也部分使用了這些技術。其優點是減少http請求背景圖的次數,降低服務器的壓力，頁面的背景圖能同時出現，避免出現空白背景。缺點是不好維護，另外有試驗的結果顯示會稍微影響渲染的速度，因爲要計算position，但是其優點大於缺點，尤其是網站的背景圖多的時候。現在也有多個工具可以幫助我們自動合併背景圖和生成相應的background-position。
http://spritegen.website-performance.org/
http://drupal.org/project/sprites
另外，如果你使用的是asp.net來開發網站，可以使用微軟開源的一款工具，可以在運行時生成對應的css srite。
具體參考這裏：GENERATE CSS SPRITES IN ASP.NET
以上就是我認爲比較重要CSS標準實踐，都是從整體來關注css的標準實踐，其實css中細節的的一些最佳實踐還有很多，需要具體問題需要具體討論，目前各個工程師寫的css代碼多種多樣，也比較混亂，也與css代碼容易上手並且相同的效果實現方法有多種多樣有關。不管語言的靈活性如何，養成一個良好的寫代碼習慣非常重要，這些需要在實踐中不斷總結和提高，希望這篇文章能給剛開始學習css的同行們提供一些幫助，在技術的提高過程中少走一些彎路。