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

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

更新時(shí)間:2017-04-14 來源:黑馬程序員Web前端培訓(xùn)學(xué)院 瀏覽量:

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

使用有效的CSS代碼。

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

命名

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

統(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ù)制代碼

簡化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://ko1818.cn/news/web.html 
分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!