DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 前端CSS代碼規范:6月分享前端CSS代碼規范【基礎】
前端CSS代碼規范:6月分享前端CSS代碼規范【基礎】
編輯:CSS進階教程     

破洛洛文章簡介:19UED前端CSS代碼規范 V1.0.

1、申明及注釋

  • 1.1、文件頭部必須加上文件申明信息,必須包括文件描述、作者、最後更新(更新人+時間)
    1. /*
    2. *@Description: public common css (可寫中文)
    3. *@Author: sev7n
    4. *@Update: sev7n(2011-08-09 17:22)
    5. */
  • 1.2、CSS代碼注釋規范請參考UED前端注釋規范.docx 文件

2、 編碼

目前19樓頁面主要使用gb2312編碼,請注意保持CSS文件編碼與頁面編碼一致(不要將CSS文件設置為utf-8等其他編碼)。

為了防止文件合並及編碼轉換時造成問題,建議將樣式中文字體名字改成對應的英文名字,如:黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei,幾個單詞中間有空格組成的必須加引號)

3、 命名規范

  • 3.1、采用通俗易懂的英文單詞並按內容/功能命名,嚴禁出現如left、right等方向名詞的class/id,嚴禁出現如xxx1、xxx2等的數字class/id
  • 3.2、除布局、唯一獨立模塊外建議少用id,必須保證id唯一性
  • 3.3、一律采用小寫中劃線方式命名,如 xxx-yyy,禁止出現大寫字母
  • 3.4、盡可能提高代碼模塊的復用,復用模塊、獨立模塊可按xxx-mod命名(-mod可不寫),mod下面再取xxx-hd(頭部)、xxx-bd(內容)、xxx-ft(底部)命名
  • 3.5、常用命名(多記多查英文單詞):page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

4、 書寫順序

CSS書寫建議按以下順序:

  • 4.1、顯示屬性
    display | position | float | clear | cursor …
  • 4.2、盒模型
    margin | padding | width | height
  • 4.3、文本屬性
    vertical-align | white-space | text-decoration | text-align | color | font | content …
  • 4.4、邊框背景
    border | background
  • 4.5、內容管理、層級
    overflow | z-index | zoom

5、 其他

  • 5.1、禁止使用expression表達式
  • 5.2、禁止濫用!important(使用前必須討論確認不會造成其他BUG或者維護問題)
  • 5.3、盡量少的使用濾鏡,盡量減少hack數,能不hack的堅決不hack
  • 5.4、層級(z-index)必須清晰明確,頁面彈窗、氣泡為最高級(最高級為999,如showWin、pop等),不同彈窗氣泡之間可在三位數之間調整;普通區塊為10-90內10的倍數;區塊展開、彈出為當前父層級上個位增加,禁止層級間盲目攀比,如以下html結構:
    1. <ul class=“post-bd”>
    2. <li class=“post-to”>
    3. <div class=“post-tag”></div>
    4. <div class=“post-add”></div>
    5. </li>
    6. <li class=“post-editor”></li>
    7. <li class=“post-app”></li>
    8. </ul>

    (N)

    1. .post-to {z-index:999;}
    2. .post-tag {z-index:99;}
    3. .post-add {z-index:9;}
    4. .post-editor {z-index:99;}
    5. .post-app {z-index:9;}

    (Y)

    1. .post-to {z-index:90;}
    2. .post-tag {z-index:99;}
    3. .post-add {z-index:98;}
    4. .post-editor {z-index:80;}
    5. .post-app {z-index:70;}
  • 5.5、保持代碼的可讀性與可維護性,代碼必須縮進,CSS結構同html結構 (但不建議縮進太多,能大概看出結構即可),選擇器與{}之間必須有一個空格分隔,{}裡不要出現多余的空格、換行

    (N)

    1. .post-to{z-index:999 ; }
    2. .post-tag{z-index:99; }
    3. .post-add{z-index:9 ;}

    (Y)

    1. .post-to {z-index:999}
    2. .post-tag {z-index:99}
    3. .post-add {z-index:9}
  • 5.6、在保證選擇器准確的情況下盡量簡化選擇器 (盡量不超過4級),不寫多余的選擇器(如class/id前的標簽選擇器、li上一級的的ul/ol、dt/dd上一級的dl等,在保證准確的前提下能去掉的都去掉)

    (N)

    1. div#post-to {}
    2. .post-app dl dt {}
    3. .post-app ul li.post-xxx {}

    (Y)

    1. #post-to {}
    2. .post-app dt {}
    3. .post-app .post-xxx {}
  • 5.7、字體粗細采用具體數值,粗體bold寫為700,正常normal寫為400
  • 5.8、能縮寫的盡量縮寫,如margin、padding、font(font-style font-variant font-weight font-size/line-height font-family)、border(border-width border-style border-color)、background(background-color background-image background-repeat background-attachment background-position)等

    (N)

    1. .post-tag {margin:2px;margin-right:5px;font-weight: bold;font-size:14px;line-height:24px;font-family:”黑體”}

    (Y)

    1. .post-tag { margin:2px 5px 2px 2px; font: 700 14px/24px "黑體"}
  • 5.9、去掉0後面的單位(禁止出現如0px等多余的單位)、顏色值不要出現red/blue等顏色名詞(一律采用#加16進制來表示,CSS3的rgb除外),不強制顏色值的大小寫、不強制將6個字母的#顏色值縮寫為3個。

    (N)

    1. .post-tag {margin:0px 0px 1px 1px;color:rgb(255,255,255);background: white;}

    (Y)

    1. .post-tag {margin:0 0 1px 1px;color:#FFFFFF;background:#fff}

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