網(wǎng)頁前端開發(fā)-19UED前端CSS代碼規(guī)范

網(wǎng)頁前端開發(fā)必須有一個(gè)規(guī)范和良好的習(xí)慣，下面就是圖趣摘選的19樓UED組1.0版的css書寫規(guī)范，供網(wǎng)頁設(shè)計(jì)師參考。

1、申明及注釋

• 1.1、文件頭部必須加上文件申明信息，必須包括文件描述、作者、最后更新(更新人+時(shí)間)
   

  1. /*  
  2. *@Description: public common css （可寫中文）  
  3. *@Author:      sev7n  
  4. *@Update:      sev7n(2011-08-09 17:22)  
  5. */  
• 1.2、CSS代碼注釋規(guī)范請(qǐng)參考UED前端注釋規(guī)范.docx 文件

2、 編碼

目前19樓頁面主要使用gb2312編碼，請(qǐng)注意保持CSS文件編碼與頁面編碼一致（不要將CSS文件設(shè)置為utf-8等其他編碼）。

為了防止文件合并及編碼轉(zhuǎn)換時(shí)造成問題，建議將樣式中文字體名字改成對(duì)應(yīng)的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei，幾個(gè)單詞中間有空格組成的必須加引號(hào))

3、 命名規(guī)范

• 3.1、采用通俗易懂的英文單詞并按內(nèi)容/功能命名，嚴(yán)禁出現(xiàn)如left、right等方向名詞的class/id，嚴(yán)禁出現(xiàn)如xxx1、xxx2等的數(shù)字class/id
• 3.2、除布局、唯一獨(dú)立模塊外建議少用id，必須保證id唯一性
• 3.3、一律采用小寫中劃線方式命名，如 xxx-yyy，禁止出現(xiàn)大寫字母
• 3.4、盡可能提高代碼模塊的復(fù)用，復(fù)用模塊、獨(dú)立模塊可按xxx-mod命名（-mod可不寫），mod下面再取xxx-hd（頭部）、xxx-bd（內(nèi)容）、xxx-ft（底部）命名
• 3.5、常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

4、 書寫順序

CSS書寫建議按以下順序：

• 4.1、顯示屬性
  display | position | float | clear | cursor …
• 4.2、盒模型
  margin | padding | width | height
• 4.3、文本屬性
  vertical-align | white-space | text-decoration | text-align | color | font | content …
• 4.4、邊框背景
  border | background
• 4.5、內(nèi)容管理、層級(jí)
  overflow | z-index | zoom

5、 其他

• 5.1、禁止使用expression表達(dá)式
• 5.2、禁止濫用！important（使用前必須討論確認(rèn)不會(huì)造成其他BUG或者維護(hù)問題）
• 5.3、盡量少的使用濾鏡，盡量減少hack數(shù)，能不hack的堅(jiān)決不hack
• 5.4、層級(jí)(z-index)必須清晰明確，頁面彈窗、氣泡為最高級(jí)（最高級(jí)為999，如showWin、pop等），不同彈窗氣泡之間可在三位數(shù)之間調(diào)整；普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級(jí)上個(gè)位增加，禁止層級(jí)間盲目攀比,如以下html結(jié)構(gòu)：
   

  1. <ul class=“post-bd”>  
  2.     <li class=“post-to”>  
  3.         <div class=“post-tag”></div>  
  4.             <div class=“post-add”></div>  
  5.         </li>  
  6.     <li class=“post-editor”></li>  
  7.     <li class=“post-app”></li>  
  8. </ul>  

  (N)

   

  1. .post-to {z-index:999;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:9;}   
  4. .post-editor {z-index:99;}   
  5. .post-app {z-index:9;}  

  (Y)

   

  1. .post-to {z-index:90;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:98;}   
  4. .post-editor {z-index:80;}   
  5. .post-app {z-index:70;}  
• 5.5、保持代碼的可讀性與可維護(hù)性，代碼必須縮進(jìn)，CSS結(jié)構(gòu)同html結(jié)構(gòu) (但不建議縮進(jìn)太多，能大概看出結(jié)構(gòu)即可)，選擇器與{}之間必須有一個(gè)空格分隔，{}里不要出現(xiàn)多余的空格、換行

  (N)

   

  1. .post-to{z-index:999 ; }   
  2. .post-tag{z-index:99; }   
  3. .post-add{z-index:9 ;}  

  (Y)

   

  1. .post-to {z-index:999;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:9;}  
• 5.6、在保證選擇器準(zhǔn)確的情況下盡量簡(jiǎn)化選擇器 (盡量不超過4級(jí))，不寫多余的選擇器(如class/id前的標(biāo)簽選擇器、li上一級(jí)的的ul/ol、dt/dd上一級(jí)的dl等，在保證準(zhǔn)確的前提下能去掉的都去掉)

  (N)

   

  1. div#post-to {}     
  2. .post-app dl dt {}   
  3. .post-app ul li.post-xxx {}  

  (Y)

   

  1. #post-to {}    
  2. .post-app dt {}   
  3. .post-app .post-xxx {}  
• 5.7、字體粗細(xì)采用具體數(shù)值，粗體bold寫為700，正常normal寫為400
• 5.8、能縮寫的盡量縮寫，如margin、padding、font(font-style font-variant font-weight font-size/line-height font-family)、border(border-width border-style border-color)、background(background-color background-image background-repeat background-attachment background-position)等

  (N)

   

  1. .post-tag {margin:2px;margin-right:5px;font-weight: bold;font-size:14px;line-height:24px;font-family:”黑體”;}  

  (Y)

   

  1. .post-tag { margin:2px 5px 2px 2px; font: 700 14px/24px ” 黑體”; }  
• 5.9、去掉0后面的單位（禁止出現(xiàn)如0px等多余的單位）、顏色值不要出現(xiàn)red/blue等顏色名詞（一律采用#加16進(jìn)制來表示，CSS3的rgb除外），不強(qiáng)制顏色值的大小寫、不強(qiáng)制將6個(gè)字母的#顏色值縮寫為3個(gè)。

  (N)

   

  1. .post-tag {margin:0px 0px 1px 1px;color:rgb(255,255,255);background: white;}  

  (Y)

   

  1. .post-tag {margin:0 0 1px 1px;color:#FFFFFF;background:#fff;}