前端代碼標準最佳實務：CSS篇

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

1，命名

和其他語言規範一樣，css的命名也講究命名要有意義，命名要儘可能短但是要足夠表達含義；命名的詞用連字號串連。

不規範的命名：

#navigation{}.demoimage{}.error_status{}

規範的命名：

#nav{}.demo-image{}.error-status{}

2, css選取器

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

不規範定義：

ul#menus{}div.info{}

規範定義：

 

.main-menus{}.info{}

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

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

不規範的定義：

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;

規範定義：

 

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的最佳代碼格式主要有以下幾點：定義順序以字母序排列，不考慮瀏覽器首碼；定義以分號結束；屬性名稱定義的分號後添加一個空格；多個選取器定義時，每個定義單獨佔一行。

/*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檔案即可。

<!--[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*/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

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

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

.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://csssprites.com/

http://drupal.org/project/sprites

另外，如果你使用的是asp.net來開發網站，可以使用微軟開源的一款工具，可以在運行時產生對應的css srite。

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

 

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