DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> Discuzx系統 CSS 編碼規范、CSS屬性書寫順序
Discuzx系統 CSS 編碼規范、CSS屬性書寫順序
編輯:布局實例     

   1. 屬性寫在一行內,屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格,例如:.class { width: 400px; height: 300px; }

  2. 屬性的書寫順序:

  2.1. 按照元素模型由外及內,由整體到細節書寫,大致分為五組:

  位置:position,left,right,float

  盒模型屬性:display,margin,padding,width,height

  邊框與背景:border,background

  段落與文本:line-height,text-indent,font,color,text-decoration,...

  其他屬性:overflow,cursor,visibility,...

  2.2. 針對特殊浏覽器的屬性,應寫在標准屬性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

  3. 謹慎添加新的選擇符規則,尤其不可濫用 id,盡可能繼承和復用已有樣式

  4. 選擇符、屬性、值均用小寫(格式的顏色值除外),縮寫的選擇符名稱須說明縮寫前的全稱,例如 .cl -> Clearfix

  5. 避免使用各種 CSS Hack,如需對 IE 進行特殊定義,請參閱下節“關於 CSS Hack 的說明”

  6. 勿使用冗余低效的 CSS 寫法,例如:

  ul li a span { ... }

  7. 慎用 !important

  8. 建議使用在 class/id 名稱中的詞語

  6.1. 表示狀態:a->active

  6.2. 表示結構:h->header,c->content,f->footer

  6.3. 表示區域:mn->main,sd->side,nv-navigation,mu->menu

  6.4. 表示樣式:l-list,tab,p_pop

  9. 開發過程中的未定事項,須用 [!] 標出,以便於後續討論整理

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved