前端开发规范集锦

如下是我我的整理的一些前端开发规范，各位前端工程师日常没事的时候能够看看，争取都用在本身开发的项目上，固然这些脑残的IE也都是支持的。

1、html规范

1.符合web2.0标准，语义化html，结构、表现、行为三层分离，兼容性优良，代码简洁明了有序，尽量的减小服务器负载，快速的解析速度。

2.正确使用块级元素和内联元素嵌套，h一、h二、h三、h四、h五、h六、P、dt标签不能包含div等块级元素，只能包含内联元素，li能够嵌套div,ul,ol等块级元素，内联元素中不可嵌套块级元素。

3.正确使用<ul><li> 无序列表（在文章列表、导航条，下拉列表、tab使用）、<ol><li> 有序列表（文章列表等根据须要使用）、<dl><dt>（自定义列表）。

4.加粗使用<strong>标签， 表示关键词强调的语义化，有助于SEO。

5. 不建议使用<br/>，用margin进行控制。

6.p标签订义段落,用来区分段落，有语义化的，文章正文使用p标签是理所固然的，推荐在文章或者文本段落之外的地方尽可能少用P标签，不宜用来大范围的布局。

7. 标题要用h*(同一页面只能有一个h1)。

8.标签、属性、属性命名必须由小写字母及下划线数字组成，且全部标签必须闭合，包括单标签。

9.尽量减小div多层嵌套。

10.在html页面中尽可能避免直接使用行内样式来控制标签样式，作到内容与表现分离。

11.多余代码, 好比页面注释掉不须要的代码，应该坚定删除掉。

12.指定img明确的宽度和高度，能够增长页面渲染速度。

2、css规范

1.图片尽可能使用css写入样式中。

2. 背景图片请尽量使用sprite技术，减少http请求。

3.连接的样式请严格按照：a:link -> a:visited -> a:hover -> a:active（LVHA）的顺序写。

4.合并margin、padding、border的设置，尽可能使用缩写法，好比margin:0 10px 0 10px;

5.选择器应该在知足功能的基础上尽可能简短，减小选择器嵌套，查询消耗，可是必定要避免覆盖全局样式设置。

6.若是没有边框时，不要写成 border:0，应该写成 border:none。

7.在保持代码解析的前提下，尽可能合并重复的样式，例如：a { display:block }  span{ display:block }   合并：a,span { display:block }。

8.background、font 等能够缩写的属性，尽可能使用缩写形式

background: color image repeat attachment position;

font: style weight size/lineHeight family;

9.不要直接为html标签添加css样式，好比div {width: 100px;｝

10.尽可能少用hack，能不hack就尽可能不用hack，为了兼容必须须要时就使用。

11.为了SEO和页面可用性，请使用text-indent来隐藏文本内容。

12.不要在 html 中加入标签来清除浮动，经过在浮动元素的父元素上添加.clearfix 来清除浮动：
.clearfix:dfter{content:”.”; display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1}

13.字体名称最好映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei);

14.css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其余属性. 此条可根据自身习惯书写，但尽可能保证同类属性写在一块儿。属性列举：
布局定位属性主要包括： float、clear、position、top、right、bottom、left、display、visibility、overflow等；
自身属性主要包括：width、height、margin、padding、background、border；
文本属性主要包括：font、color、text-align、vertical-align、text-decoration、text-indent、white-space等；
其余属性包括：list-style、cursor、 z-index、zoom等。

15.不须要重复定义可继承的值，css中，子元素自动继承父元素的属性值，如颜色、字体等，已经在父元素中定义过的，在子元素中能够直接继承，不须要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，可是要注意，浏览器可能用一些默认值覆盖你的定义。

16.用png图片作图片时，要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果，请为ie6单独定义背景：
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

3、javascript规范

1.js每行代码结束时必须有分号;

2.引用js库文件，文件须包含库名称及版本号，以及是否为压缩版，好比jquery.1.81.min.js；引用插件，文件名为库名+插件名称，好比jquery.cookie.js。

3.变量和函数命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如myName。

4.避免全局变量。

5.命名语义化, 尽量利用英文单词或其缩写。

6.页面引用js文件和js代码放在html代码的最底部。

4、图片使用规范

1.图片格式仅限于gif、png、jpg。

2.若是背景图片有动画，则保存成 gif，若是没有动画，也没有半透明效果，则保存成jpg。

3.若是有半透明效果，则保存成 png-24，但尽可能避免使用半透明的png图片。

4.重要图片必须加上alt属性，给重要的元素和截断的元素加上title。

5.命名所有用小写英文字母、数字、和横线的组合，尽可能用易懂的词汇，便于团队其余成员理解，命名分头尾两部分， 用下划线隔开， 好比ad-left01.gif、btn-submit.jpg。

6.在保证视觉效果的状况下选择最小的图片格式与图片质量, 以减小加载时间。

7.运用css sprite技术集中小的背景图或图标, 减少页面http请求。

5、注释规范

1.html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2.css注释: 
单行注释： /*中文说明*/
有修改者模块注释： /* module: module by lingdu 2014-07-30 */

3.JavaScript注释, 单行注释使用:  //这儿是单行注释多行注释使用:  /* 这儿有多行注释 */