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

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

更新時間: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)過多的祖先選擇器，各瀏覽器會有性能差異，消耗在選擇器的時間也不盡相同。

盡量最多控制在3級以內(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

寫屬性值的時候盡量使用縮寫。


  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時，忽略單位


  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外的引號

  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個字符


  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ī)則單行書寫

一個類一行，每個屬性間用空格隔開，不用強(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ù)制代碼

分隔選擇器

每個選擇器和聲明都要獨(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é)

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


  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é)

考慮到一致性和拓展性，請?jiān)诿總€聲明尾部都加上分號。


  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的用處，生成時間及作者等信息。


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

頁面注釋

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


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

分級注釋

比如在main模塊下，建立了news、photo等欄目，可使用分級注釋，以指明層級結(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 {} /* 修正橫向滾動條錯誤 by your name */</font>
復(fù)制代碼


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