Discuzx系統(tǒng) CSS 編碼規(guī)范、CSS屬性書(shū)寫(xiě)順序

字號(hào):


    1. 屬性寫(xiě)在一行內(nèi),屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格,例如:.class { width: 400px; height: 300px; }
    2. 屬性的書(shū)寫(xiě)順序:
    2.1. 按照元素模型由外及內(nèi),由整體到細(xì)節(jié)書(shū)寫(xiě),大致分為五組:
    位置:position,left,right,float
    盒模型屬性:display,margin,padding,width,height
    邊框與背景:border,background
    段落與文本:line-height,text-indent,font,color,text-decoration,...
    其他屬性:overflow,cursor,visibility,...
    2.2. 針對(duì)特殊瀏覽器的屬性,應(yīng)寫(xiě)在標(biāo)準(zhǔn)屬性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
    3. 謹(jǐn)慎添加新的選擇符規(guī)則,尤其不可濫用 id,盡可能繼承和復(fù)用已有樣式
    4. 選擇符、屬性、值均用小寫(xiě)(格式的顏色值除外),縮寫(xiě)的選擇符名稱(chēng)須說(shuō)明縮寫(xiě)前的全稱(chēng),例如 .cl -> Clearfix
    5. 避免使用各種 CSS Hack,如需對(duì) IE 進(jìn)行特殊定義,請(qǐng)參閱下節(jié)“關(guān)于 CSS Hack 的說(shuō)明”
    6. 勿使用冗余低效的 CSS 寫(xiě)法,例如:
    ul li a span { ... }
    7. 慎用 !important
    8. 建議使用在 class/id 名稱(chēng)中的詞語(yǔ)
    6.1. 表示狀態(tài):a->active
    6.2. 表示結(jié)構(gòu):h->header,c->content,f->footer
    6.3. 表示區(qū)域:mn->main,sd->side,nv-navigation,mu->menu
    6.4. 表示樣式:l-list,tab,p_pop
    9. 開(kāi)發(fā)過(guò)程中的未定事項(xiàng),須用 [!] 標(biāo)出,以便于后續(xù)討論整理