前端代码规范-白红宇

规范目的

提高工作效率，便于后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个良好的前端架构。

规范基本准则

符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。

一、文件规范

1.1 建包问题

文件均归档至约定的目录中，建包格式如下：

注意：所有的css文件放在css文件夹中，image放在img文件夹中，js放在js文件夹中

1.2 HTML部分

1.2.1 编码：所有编码均采用xhtml/html，标签必须闭合，编码统一为UTF-8，在多语言的网站添加<html lang="zh-CN">，说明内容是以中文显示和阅读为基础的

1.2.2 语义化：正确使用标签，充分利用无兼容性问题的html自身标签

1.3 CSS部分

1.3.1 CSS种类及其命名

可以将CSS样式表分为三类：全局样式表、模块通用样式表和独立样式表

全局样式表常用命名：public.css

模块通用样式表命名：模块名_basic.css

独立样式表：模块名_页面名.css

1.3.2 CSS引入

CSS文件引入可通过外联或者内联方式引入

注意：link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。

1.4 js部分

HTML中引入js放在</body>之前

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

二、注释规范

2.1 顶部文档注释（推荐使用）

1 /*2 * @description: 中文说明3 * @author: name4 * @update: name(xxxx-xx-xx xx:xx)5 */复制代码

2.2 属性注释

1 /*Header*/2 /*Nav*/3 /*Container*/4 ...5 /*Footer*/复制代码

2.3 功能模块注释

1 /* module: module1 by 小王 */2 ...3 /* module: module2 by 小李 */复制代码

2.4 特殊注释

1 /*Color codes 2 -------------------------------- 3     Red: #e03d3d; 4     Dark: #424242; 5     Light: #c3c5c0; 6     blue #e03d3d; 7 */ 8  9 /*10    默认宽度为1128px 11 */12 13 /*@group Reset Css*/14 /*@group General Definitions*/15 16 /*---------------Typography-----------------*/17 /*------------------Sprite--------------------*复制代码

注意：

每一个文档对应一个文档注释（主要注释内容包括：文档创建人、创建时间、主要内容描述等）

属性注释说明：可以分CSS属性来进行命名（如：margin/padding值、CSS Hack、全局Hover等）

功能模块注释说明：分模块来编写CSS样式（如：头部、导航、按钮、页脚等等）

三、命名规范

3.1 如何命名

css最好用class来命名，js用id来命名，已做区分

id和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名

3.2 命名示例

.div1{} /* 不推荐；无意义 */

.a_green{} /* 不推荐；无意义 */

.menu{} /* 推荐；特殊性*/

.header{} /* 推荐；通用性*/

3.3 命名精简

id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提高代码效率

.navigation{} /* 不推荐 */

.login_box_inside_con{} /* 不推荐 */

.nav{} /* 推荐 */

3.4 命名嵌套问题

书写css要注意先后顺序和嵌套问题，从性能上考虑尽量减少选择器的层级

.nav ul.list{} /* 不推荐 */

.nav .list{} /* 推荐 */

3.5 注意事项

规则命名中，一律采用小写加下划线的方式

命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

命名注意缩写，但是不能盲目缩写

不允许通过1、2、3等序号进行命名

避免class与id重名

id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

class用于标识某一个类型的对象，命名必须言简意赅

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称

四、书写规范

4.3 代码性能优化

合并margin、padding、border的-top/-right/-bottom/-left的设置，尽量使用短名称

选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置

禁止在css中使用*选择符

0后面不需要单独，比如0px可以省略成0，0.8px可以省略成.8px

如果可以颜色尽量用三位字符表示，比如#ccc

如果没有边框时，不要写成border:0;应该写成border:none

在保存代码解耦的前提下，尽量合并重复的样式

background、font等可以缩写的属性，尽量使用缩写形式

能以背景形式呈现的图片，尽量都写入CSS样式中

五、其他规范

不要轻易改动全站级CSS和通用CSS库，改动后，要经过全面测试

避免使用filter

避免在CSS中使用expression

避免过小的背景图片平铺

尽量不要在CSS中使用!important

绝对不要在CSS中使用"*"选择符

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

背景图片在情况允许，尽可能使用sprite技术，减小http请求，考虑到多人协作开发，sprite按照模块、业务、页面来划分

页面内部尽量避免使用style属性，CSS放在head标签中，由link标签引入，使页面的结构与表现分离

尽量减少使用float、position等影响性能的属性，这样可以避免新手在布局时出现的混乱

尽量少使用
来断行

不要连续出现多个 (空格)，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent、maring/padding等方法来实现

排版如果遇到需要首行缩进的处理，可以使用text-indent:2em;

分清楚什么情况下jpg/gif/png图片

六、帮助文档

6.1 全局样式写法（以reset.css为文件名）

/* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form elements 表单元素 */th, td {  /* table elements 表格元素 */  margin: 0;  padding: 0;}/* 设置默认字体 */body,button,input,select,textarea {  /* for ie */  /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/  font: 12px/1 Tahoma, Helvetica, Arial, '\5b8b\4f53', sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */}h1 {  font-size: 18px; /* 18px / 12px = 1.5 */}h2 {  font-size: 16px;}h3 {  font-size: 14px;}h4,h5,h6 {  font-size: 100%;}address,cite,dfn,em,var {  font-style: normal;} /* 将斜体扶正 */code,kbd,pre,samp,tt {  font-family: 'Courier New', Courier, monospace;} /* 统一等宽字体 */small {  font-size: 12px;} /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */ul,ol {  list-style: none;}/* 重置文本格式元素 */a {  text-decoration: none;}a:hover {  text-decoration: underline;}abbr[title],acronym[title] {  /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */  border-bottom: 1px dotted;  cursor: help;}q:before,q:after {  content: '';}/* 重置表单元素 */legend {  color: #000;} /* for ie6 */fieldset,img {  border: none;} /* img 搭车：让链接里的 img 无边框 *//* 注：optgroup 无法扶正 */button,input,select,textarea {  font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */}/* 重置表格元素 */table {  border-collapse: collapse;  border-spacing: 0;}/* 重置 hr */hr {  border: none;  height: 1px;}复制代码

结语

以上内容源于互联网，归于互联网