前端CSS代码规范:19楼前端CSS代码规范

2024-07-11 09:01:56

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：19UED前端CSS代码规范 V1.0.

1、申明及注释

1.1、文件头部必须加上文件申明信息，必须包括文件描述、作者、最后更新(更新人+时间)

1.2、CSS代码注释规范请参考UED前端注释规范.docx 文件

2、编码

目前19楼页面主要使用gb2312编码，请注意保持CSS文件编码与页面编码一致（不要将CSS文件设置为utf-8等其他编码）。

为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)

3、命名规范4、书写顺序

CSS书写建议按以下顺序：

5、其他

5.4、层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999，如showWin、pop等），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比,如以下html结构：

(N)

(Y)

5.5、保持代码的可读性与可维护性，代码必须缩进，CSS结构同html结构 (但不建议缩进太多，能大概看出结构即可)，选择器与{}之间必须有一个空格分隔，{}里不要出现多余的空格、换行

(N)

(Y)

5.6、在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级)，不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等，在保证准确的前提下能去掉的都去掉)

(N)

(Y)

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)

(Y)

5.9、去掉0后面的单位（禁止出现如0px等多余的单位）、颜色值不要出现red/blue等颜色名词（一律采用#加16进制来表示，CSS3的rgb除外），不强制颜色值的大小写、不强制将6个字母的#颜色值缩写为3个。

(N)

(Y)

上一篇：CSS属性影响文字选择范围和网页文字选择的可用性

下一篇：网页技巧:模拟百度搜索结果网站小图标