上一篇《前端代碼標準最佳實踐：javascript》發(fā)表后，大家討論還是很熱烈，從側面體現了前端工程師對寫標準的前端代碼的重視程度很高。這些最佳標準實踐并不是那個權威組織發(fā)布的，而是由大量的前端工程師們在實踐過程中的經驗總結，目的在于提高代碼的可讀性，可維護性和性能。那么接著上一篇，我們再來談談CSS代碼的一些標準實踐。

1，命名

和其他語言規(guī)范一樣，css的命名也講究命名要有意義，命名要盡可能短但是要足夠表達含義；命名的詞用連字符連接。

不規(guī)范的命名：

規(guī)范的命名：

2, css選擇器

不同的標簽類型盡可能不用相同的css類名；盡可能不用標簽類型選擇器，用css類名和ID足夠定義css，因為ID是可以唯一確定Dom元素的，而css類是不推薦用于不同的標簽的；另外應該少用ID選擇器定義，因為ID的唯一性使得定義的css無法重用。

不規(guī)范定義：

規(guī)范定義：

3，屬性名稱和值的定義精簡

css的某些屬性定義可以可以分拆為各個獨立項，比如padding，border, margin, background, font等，雖然分拆定義的可讀性會好一些，但是就目前的經驗來看，前端工程師們對這些常用的css理解程度足夠好，合并后的定義不會對可讀性帶來影響，反而代碼更簡潔；此外對屬性值為0的單位可以省略，在0后面添加入px em cm等單位是毫無意義的；對小數值可以省略小數點前的0；url值兩端的引號可以省略。

不規(guī)范的定義：

規(guī)范定義：

4，css代碼的格式

漂亮統(tǒng)一的代碼格式可以提高代碼的可讀性和可維護性，css的最佳代碼格式主要有以下幾點：定義順序以字母序排列，不考慮瀏覽器前綴；定義以分號結束；屬性名稱定義的分號后添加一個空格；多個選擇器定義時，每個定義單獨占一行。

5，避免寫兼容某個瀏覽器的css代碼

避免寫特定瀏覽器兼容代碼，這里說的特定瀏覽器主要指的是萬惡的IE系列瀏覽器，IE6，7尤為嚴重。碰到瀏覽器兼容問題，首先考慮的是能否換一種其它的解決方案，如果沒有合適的解決方案，記得單獨寫一個css文件給這些特定的瀏覽器，不要把兼容代碼和常規(guī)代碼混合，這樣方便代碼的維護，如果后期不支持這些老舊瀏覽器，可以直接刪除這些單獨的css文件即可。

6，記住塊元素和行內元素的區(qū)別，避免寫無用的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權重的不多。以下是權重的規(guī)則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現，因為光是靠前后的樣式定義來影響最終的樣式是不靠譜的，也會給后期的維護埋下一個雷區(qū)；另外為了代碼的重用性，應盡可能定義小的權重，這和不推薦使用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

在此基礎上定義各種按鈕的特定樣式

另外再推薦一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。

10，雪碧圖(css sprite)

這項技術是將多張背景圖合并為一張，然后通過設置不同的background-position屬性來展示不同的背景?，F在越來越多的網站采用這項技術，例如：亞馬遜，蘋果，Google, YouTube等，我們目前的項目MSB也部分使用了這些技術。其優(yōu)點是減少http請求背景圖的次數,降低服務器的壓力，頁面的背景圖能同時出現，避免出現空白背景。缺點是不好維護，另外有試驗的結果顯示會稍微影響渲染的速度，因為要計算position，但是其優(yōu)點大于缺點，尤其是網站的背景圖多的時候。現在也有多個工具可以幫助我們自動合并背景圖和生成相應的background-position。

http://spritegen./

http:///

http:///project/sprites

另外，如果你使用的是來開發(fā)網站，可以使用微軟開源的一款工具，可以在運行時生成對應的css srite。

具體參考這里：GENERATE CSS SPRITES IN ASP.NET

以上就是我認為比較重要CSS標準實踐，都是從整體來關注css的標準實踐，其實css中細節(jié)的的一些最佳實踐還有很多，需要具體問題需要具體討論，目前各個工程師寫的css代碼多種多樣，也比較混亂，也與css代碼容易上手并且相同的效果實現方法有多種多樣有關。不管語言的靈活性如何，養(yǎng)成一個良好的寫代碼習慣非常重要，這些需要在實踐中不斷總結和提高，希望這篇文章能給剛開始學習css的同行們提供一些幫助，在技術的提高過程中少走一些彎路。