Web前端工程师要知道的前端开发代码规范!
一、 HTML/CSS规范
1 、浏览器兼容
根据公司业务要求而定，一般：
§ 主流程测试：Chrome 30+、IE9+;
§ 完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。
2 html代码规范
(1)声明与编码
1、html头部声明统一：
1. <!DOCTYPE html>
2、页面编码统一：
1. <meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->
(2)格式缩进
html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。
(3) 模块注释
html较大独立模块之间注释格式统一使用：
1. <!-- start: XXX模块 -->
2. …
3. <!-- end: XXX模块 -->
或者：
1. <!-- XXX模块 -->
2. …
3. <!-- /XXX模块 -->
(4)标签与属性
1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：
1. <div data-bgColor="red"></div>
2.
3. $('div').data('bgColor'); // 取不到，已自动被浏览器转成了data-bgcolor
2、所有html属性*添加双引号(非单引号)。
1. // 禁止
2. <div id=mainframe> 或 <div id='mainframe'>
3.
4. // 推荐
5. <div id="mainframe">
3、所有标签*采用合理嵌套。
1. // 禁止
2. <p><b></p></b>
3.
4. // 推荐
5. <p><b></b></p>
6.
7. // 禁止inline级标签嵌套block级标签
8. <span><div></div></span>
4、所有<、&、>等特殊符号(非标签一部分)用编码表示。< 编码成\< ，>编码成\>，&编码成\&
5、img标签中*添加alt属性。如： <imgsrc="…" alt="logo" />
6、标签在运用时，应尽量使用语义化标签，如:
1. <h1>标题<h1>
2. <lable for="user">用户名：</lable>
3. <input name="username" id="user">
在语义不明显，既可用div也可用p时，应优先考虑p标签。
3、 CSS代码规范
(1) CSS引用规范
1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式;
2、html页面引入样式文件：
统一使用link标签，少用@import(原生import有加载性能问题)，sass、less、vue.js等文件使用import命令除外(因为较终前端构建工具会将引入文件编译成一个css文件)。
1. <link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->
(2) CSS注释规范
1、css头部文档注释( 统一加上@charset声明 )，如下：
1. @charset "utf-8";
2.
3. /**
4. * @created : 2017/09/15
5. * @author : Mr.Wang
6. * @version : v1.0
7. * @desc : XX模块
8. */
关于"version"，如果对代码有修改更新version版本号，并添加相关注释。
2、内部模块之间注释(建议 @模块英文名，好查找)：
1. /* @info 商品信息区
2. ----------------------------------------------------------------*/
3. .infoArea{}
4.
5. /* 单行注释 */
6. .specArea{}
7.
8. /* @price 商品价格区
9. ----------------------------------------------------------------*/
10. .price{}
(3) CSS书写规范
1、样式书写不做强约，可分行或单行
推荐单行，理由：直观、模块之间分隔鲜明，有全局感。
2、样式中属性排序规则：先外部 > 再自身 > 后内部，推荐工具( CSScomb )
1. A.)影响文档流的属性(display, position, float, clear, visibility, table-layout等)
2.
3. B.)自身盒模型的属性(width, height, margin, padding, border等)
4.
5. C.)排版相关属性(font, line-height, text-align, text-indent, vertical-align等)
6.
7. D.)装饰性属性(color, background, opacity, cursor等)
8.
9. E.)生成内容的属性(content, list-style, quotes等)
3、所有CSS属性和值*采用小写的形式。如：FONT-SIZE:12PX*改为font-size:12px;
4、关于css背景图片(关键字：合并，缩写，去引号), 引号不是*的，而且在某些浏览器上加引号反而出错：
1. // 不推荐
2. .canbox{
3. background-color: #ff6600;
4. background-image: url("/img/xxx.png");
5. }
6.
7. // 推荐(合并、去除引号)
8. .canbox {
9. background: #f60 url(/img/xxx.png);
10. }
5、属性为0值，去除单位。
1. // 不推荐
2. .wrap{
3. margin: 0px 0px 5px 8px;
4. }
5.
6. // 推荐
7. .wrap {
8. margin: 0 0 5px 8px;
9. }
6、所有CSS的命名应语义化，如：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。
7、清除浮动时用.clearfix，禁止用无语义的 <pstyle="clear:both"></p> 清除。
8、用来显示动态文本输入的地方，样式里*加上强制英文换行：
1. word-break: break-all; word-wrap: break-word; overflow-x: hidden;
如果要显示省略号加上：text-overflow: ellipsis;
9、上下相邻的两模块尽量避免混用margin-bottom，margin-top，否则会产生重叠现象。
更多培训课程，学习资讯，课程优惠等学校信息，请进入 西安灞桥区Web培训西安未央区Python培训西安雁塔区Linux云计算培训 网站详细了解，免费咨询电话：400-998-6158
