首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之CSS編碼規(guī)范

更新時(shí)間:2017-05-31 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:

CSS代碼風(fēng)格規(guī)則CSS代碼有效性

使用有效的CSS代碼。

可使用W3C CSS validator來驗(yàn)證css。

命名

class應(yīng)優(yōu)先慮以這元素具體目的來進(jìn)行命名，應(yīng)盡量簡(jiǎn)短且富有含義。

統(tǒng)一采用小寫英文字母、數(shù)字、“-” 的組合。其中不得包含漢字、空格和特殊字符。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .demoimage {}  /* "demo" 和 "image" 中間沒加 "-" */</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .error_status {}  /* 用下劃線 "_" 是屌絲的風(fēng)格 */</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .ads-sample {}</font>
復(fù)制代碼

原則上，不建議縮寫，除非一看就懂的縮寫，如nav。

盡量避免使用id來控制樣式。

框架css類命名清單
  • 全屏：full_bg（全屏背景）
  • 容器：wrapper（最外面的主框架）
  • 頁頭：header（子項(xiàng)：h_1、h_2、……）
  • 內(nèi)容：container
  • 頁面主體：main
  • 頁尾：footer
  • 導(dǎo)航：nav（子項(xiàng)：n_1、n_2、……）
  • 菜單：menu（子項(xiàng)：m_1、m_2、……）
  • 導(dǎo)航：nav（子項(xiàng)：n_1、n_2、……）
  • 子菜單：submenu
  • 側(cè)欄：sidebar
  • 欄目：column（擴(kuò)展：column1、column2、……）
  • 左右中：left、right、center
  • 搜索：search
  • 登陸：signin
選擇器

避免出現(xiàn)過多的祖先選擇器，各瀏覽器會(huì)有性能差異，消耗在選擇器的時(shí)間也不盡相同。

盡量最多控制在3級(jí)以內(nèi)。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. ul.example {}
  3. .example1 .example2 .example3 .example4 {}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example {}
  3. .example1, 
  4. .example2 {}</font>
復(fù)制代碼

非必要的情況下不要使用元素標(biāo)簽名和ID或class進(jìn)行組合。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. ul#example {}
  3. div.error {}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. #example {}
  3. .error {}</font>
復(fù)制代碼

簡(jiǎn)化css

寫屬性值的時(shí)候盡量使用縮寫。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { 
  3.   border-top-style:none; 
  4.   font-family:Palatino, serif; 
  5.   font-size:100%; 
  6.   line-height:1.6; 
  7.   padding-bottom:2em; 
  8.   padding-left:1em; 
  9.   padding-right:1em; 
  10.   padding-top:0; 
  11. }</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}</font>
復(fù)制代碼

屬性值為0時(shí)，忽略單位


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { margin:0px; padding:0px;}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { margin:0; padding:0;}</font>
復(fù)制代碼

屬性值出現(xiàn)小數(shù)點(diǎn)忽略0


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { font-size:0.8em}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { font-size:.8em}</font>
復(fù)制代碼


省略URI外的引號(hào)

  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { background-image: url("images/noise.png");}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { background-image: url(images/noise.png);}</font>
復(fù)制代碼

十六進(jìn)制盡可能使用3個(gè)字符


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { color: #eebbcc; }</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { color: #ebc; }</font>
復(fù)制代碼

Hacks

盡可能地避免使用hack的方式解決瀏覽器樣式兼容性問題。

盡量避免使用CSS filters。

CSS代碼格式規(guī)則單行書寫

一個(gè)類一行，每個(gè)屬性間用空格隔開，不用強(qiáng)制換行。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .example { 
  3.   display:block; 
  4.   float:left; 
  5.   width:200px; 
  6.   height:300px;padding:10px; 
  7. }</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}</font>
復(fù)制代碼

分隔選擇器

每個(gè)選擇器和聲明都要獨(dú)立新行。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. a:focus, a:active { position: relative; top: 1px;}</font>
復(fù)制代碼

  1. /* 推薦 */
  2. h1,
  3. h2,
  4. h3 { font-weight: normal; line-height: 1.2;}
復(fù)制代碼

屬性名完結(jié)

出于一致性的原因，在屬性名和值之間加一個(gè)空格（可不是屬性名和冒號(hào)之間噢）。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. h3 { font-weight:bold;}</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. h3 { font-weight: bold; }</font>
復(fù)制代碼

聲明完結(jié)

考慮到一致性和拓展性，請(qǐng)?jiān)诿總€(gè)聲明尾部都加上分號(hào)。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推薦 */
  2. .test {
  3.   display: block;
  4.   height: 100px
  5. }</font>
復(fù)制代碼
  1. <font color="rgb(51, 51, 51)" size="3">/* 推薦 */
  2. .test { display: block; height: 100px;}</font>
復(fù)制代碼

css書寫順序

書寫順序按顯示屬性，自身屬性， 文本屬性順序。

顯示屬性

  • display
  • list-style
  • position
  • float
  • clear

自身屬性

  • width
  • height
  • margin
  • padding
  • border
  • background

文本屬性

  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
Css Meta規(guī)則編碼

一般情況下編碼同html的一致。

如果是urf-8，則不需要制定樣式表的編碼，因?yàn)樗J(rèn)為urf-8。

注釋頭部注釋

注明本CSS的用處，生成時(shí)間及作者等信息。


  1. <font color="rgb(51, 51, 51)" size="3">/* CSS Document  
  2. Use for:    website  
  3. Version:    1.0 
  4. Date:      time 
  5. Author:     your name 
  6. Update:      
  7. */</font>
復(fù)制代碼

頁面注釋

有時(shí)候一份CSS會(huì)把首頁和各種二級(jí)頁面樣式寫在一起，這時(shí)需要做頁面注釋。


  1. <font color="rgb(51, 51, 51)" size="3">/*********************************** 
  2. * 首頁 
  3. ***********************************/</font>
復(fù)制代碼

分級(jí)注釋

比如在main模塊下，建立了news、photo等欄目，可使用分級(jí)注釋，以指明層級(jí)結(jié)構(gòu)。


  1. <font color="rgb(51, 51, 51)" size="3">/*----------------main-----------------*/
  2. #main {}
  3. .main-bg {}
  4. /* news */
  5. .news {}
  6. /* photo */
  7. .photo  {}</font>
復(fù)制代碼

區(qū)塊間注釋
  1. <font size="3">/* news */
  2. .news {}
  3. /* photo */
  4. .photo  {}</font>
復(fù)制代碼

修改注釋

當(dāng)后期維護(hù)中有修改到css，需添加修改的注釋。


  1. <font color="rgb(51, 51, 51)" size="3">.news {} /* 修正橫向滾動(dòng)條錯(cuò)誤 by your name */</font>
復(fù)制代碼


本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/ 
分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！