19樓論壇的前端CSS代碼規范介紹
2024-07-11 08:25:56
供稿:網友
 
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;}