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

1，命名

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

不規(guī)范的命名：

規(guī)范的命名：

2, css選擇器

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

不規(guī)范定義：

規(guī)范定義：

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

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

不規(guī)范的定義：

規(guī)范定義：

4，css代碼的格式

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

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

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

6，記住塊元素和行內(nèi)元素的區(qū)別，避免寫無用的css代碼

塊級元素顯示會獨占一行，而行內(nèi)元素不會獨占一行。常見的塊級元素有：div p ul ol table h1~h6 等；行內(nèi)元素有：a em label span strong 等。塊級元素的display默認樣式是block，而行內(nèi)元素是inline，可以通過重新定義display來互轉(zhuǎn)塊級元素和行內(nèi)元素。但是記住以下的css樣式對行內(nèi)元素是無效的：width height 和垂直方向設(shè)置的margin padding，所以避免給行內(nèi)元素定義這些無用的樣式。

7，記住css定義的權(quán)重

css的選擇器是有權(quán)重的，當有多個樣式時，權(quán)重高的樣式會起作用。說一個插曲，前段時間面試了不少前端工程師，問得最多的一個問題就是css權(quán)重問題，很可惜的是知道css權(quán)重的不多。以下是權(quán)重的規(guī)則：標簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：

如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)，因為光是靠前后的樣式定義來影響最終的樣式是不靠譜的，也會給后期的維護埋下一個雷區(qū)；另外為了代碼的重用性，應(yīng)盡可能定義小的權(quán)重，這和不推薦使用id來定義樣式是一樣的道理。

8，使用css reset

各個瀏覽器對不同的標簽有其不同的內(nèi)置的樣式，為了使得在不同的瀏覽器下標簽的表現(xiàn)相同，可以定義一個單獨的base.css文件，重新定義各種標簽的默認樣式。另外推薦的css文件組織是：定義一個base.css，用于css reset，定義一個common.css，用于定義各種公用css類。這里有一份base.css，其實是以上提到的base.css和common.css的合并，分享給大家：base.css

9，多組合少繼承

這種設(shè)計方式越來越受到大家的歡迎，各種前端框架中也能看到大量這樣的設(shè)計。設(shè)計的核心思想是：把css定義中的固定部分和可變部分分開定義，使得代碼達到最大程度的重用，這樣的結(jié)果是增加了元素上添加的css類個數(shù)，但是提高了代碼的維護性和可讀性。如下的例子代碼來自bootstrap的按鈕樣式定義

按鈕有一個固定的基礎(chǔ)樣式btn

在此基礎(chǔ)上定義各種按鈕的特定樣式

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

10，雪碧圖(css sprite)

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

http://spritegen./

http:///

http:///project/sprites

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

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

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