前端代碼9種標準最佳實務：CSS，最佳實務css

前端代碼9種標準最佳實務：CSS，最佳實務css

前端工程師對寫標準的前端代碼的重視程度很高。這些最佳標準實踐並不是那個權威組織發布的，而是由大量的前端工程師們在實踐過程中的經驗總結，目的在於提高代碼的可讀性，可維護性和效能。那麼接著上一篇，我們再來談談CSS代碼的一些標準實踐。

 

1，命名

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

不規範的命名：

1 #navigation{2 }3 .demoimage{4 }5 .error_status{6 }

規範的命名：

1 #nav{2 }3 .demo-image{4 }5 .error-status{6 }

2, css選取器

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

不規範定義：

1 ul#menus{2 }3 div.info{4 }

規範定義：

1 .main-menus{2 }3 .info{4 }

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

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

不規範的定義：

規範定義：

 

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 /*css定義順序以字母序排列；結束用分號；屬性名稱與值之間添加空格*/ 2 background: fuchsia; 3 border: 1px solid; 4 -moz-border-radius: 4px; 5 -webkit-border-radius: 4px; 6 border-radius: 4px; 7 color: black; 8 text-align: center; 9 text-indent: 2em;10 11 /* http://www.cnblogs.com/sosoft/ */12 /*多個選取器定義時，每個選取器單獨佔用一行*/13 h1,14 h2,15 h3 {16     font-weight: normal;17     line-height: 1.2;18 }

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

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

1 <!--[if IE 6]>2 <link rel="stylesheet" type="text/css" href="css/ie6.css" />3 <![endif]-->4 <!--[if IE 7]>5 <link rel="stylesheet" type="text/css" href="css/ie7.css" />6 <![endif]-->

6，記住塊元素和行內元素的區別，避免寫無用的css代碼

區塊層級元素顯示會獨佔一行，而行內元素不會獨佔一行。常見的區塊層級元素有：div p ul ol table h1~h6 等；行內元素有：a em img input label select span strong textarea等。區塊層級元素的display預設樣式是block，而行內元素是inline，可以通過重新定義display來互轉區塊層級元素和行內元素。但是記住以下的css樣式對行內元素是無效的：width height 和垂直方向設定的margin padding，所以避免給行內元素定義這些無用的樣式。

7，記住css定義的權重

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

 1 /*權重為1*/ 2 div{ 3 } 4 /*權重為10*/ 5 .class1{ 6 } 7 /*權重為100*/ 8 #id1{ 9 }10 /*權重為100+1=101*/11 #id1 div{12 }13 /*權重為10+1=11*/14 .class1 div{15 }16 /*權重為10+10+1=21*/17 .class1 .class2 div{18 }

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現，因為光是靠前後的樣式定義來影響最終的樣式是不靠譜的，也會給後期的維護埋下一個雷區；另外為了代碼的重用性，應儘可能定義小的權重，這和不推薦使用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 .btn { 2   display: inline-block; 3   *display: inline; 4   padding: 4px 10px 4px; 5   margin-bottom: 0; 6   *margin-left: .3em; 7   font-size: 13px; 8   line-height: 18px; 9   *line-height: 20px;10   color: #333333;11   ...12   *zoom: 1;13   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);14      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);15           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);16 }

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

 1 .btn.disabled, 2 .btn[disabled] { 3   cursor: default; 4   background-color: #e6e6e6; 5   background-image: none; 6   opacity: 0.65; 7   filter: alpha(opacity=65); 8   -webkit-box-shadow: none; 9      -moz-box-shadow: none;10           box-shadow: none;11 }12 13 .btn-large {14   padding: 9px 14px;15   font-size: 15px;16   line-height: normal;17   -webkit-border-radius: 5px;18      -moz-border-radius: 5px;19           border-radius: 5px;20 }21 22 .btn-large [class^="icon-"] {23   margin-top: 1px;24 }25 26 .btn-small {27   padding: 5px 9px;28   font-size: 11px;29   line-height: 16px;30 }31 32 .btn-small [class^="icon-"] {33   margin-top: -1px;34 }35 36 .btn-mini {37   padding: 2px 6px;38   font-size: 11px;39   line-height: 14px;40 }

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