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;}
