web前端编码规范整合

摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个

决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护

一、 命名规范

项目命名：全部采用小写方式， 以下划线分隔，例：my_project_name

目录命名：参照项目命名规则；有复数结构时，要采用复数命名法。例：scripts, styles

JS文件命名：参照项目命名规则。例：account_model.js

CSS, SCSS文件命名：参照项目命名规则。例：retina_sprites.scss

HTML文件命名：参照项目命名规则。例：error_report.html

CSS命名：
通用类：使用小写字母，以中划线分隔。例：element-content

业务类：BEM思想，block__element--modifier。例如：person__hand--left

另外：SCSS中的变量、函数、混合、placeholder采用驼峰式命名

ID命名：采用驼峰式命名。例：colorBlack

二、 HTML规范 2.1 html头部声明统一

1、 DTD声明

2、页面编码统一

3、meta声明

PC端注明: IE兼容/keywords/description

移动端注明：

4、引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值

HTML5 规范链接：使用link，使用style，使用script

2.2 风格与易读性

1、格式缩进

html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

2、模块注释

html较大独立模块之间注释格式统一使用：

或者：

2.3 标签与属性

1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

$("div").data("bgColor");  // 取不到，已自动被浏览器转成了data-bgcolor

2、所有html属性必须添加双引号（非单引号）。

// 禁止
 或 


// 推荐

3、标签属性顺序

属性应该按照特定的顺序出现以保证易读性；

class

id

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

aria-*, role

required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；

id更加具体且应该尽量少使用，所以将它放在第二位

4、boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；

boolean属性的存在表示取值为true，不存在则表示取值为false。

    1

2.4 杂项

1、所有标签必须采用合理嵌套。

// 禁止


// 推荐


// 禁止inline级标签嵌套block级标签

2、img标签中必须添加alt属性。如：

3、减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；

很多时候，需要通过迭代和重构来使HTML变得更少。

三、 CSS代码规范 3.1 CSS引用规范

1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式；

2、html页面引入样式文件：

统一使用link标签，少用@import（原生import有加载性能问题），sass、less、vue.js等文件使用import命令除外（因为最终前端构建工具会将引入文件编译成一个css文件）。

3.2 CSS注释规范

1、css头部文档注释( 统一加上@charset声明 )，如下：

@charset "utf-8";

/**
 * @created : 2017/09/15 
 * @author : Mr.Wang 
 * @version : v1.0 
 * @desc : XX模块 
 **/

关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

2、内部模块之间注释（建议 @模块英文名，好查找）：

/* @info 商品信息区 -----------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区 ----------------------------------------------------------*/
.price{}

3.3 CSS字符规范

1、缩进：使用soft tab（2个空格）；
2、分号：每个属性声明末尾都要加分号；
3、空行:

以下几种情况需要空行

/**
 * 文件最后保留一个空行
 * "}"后最好跟一个空行，包括scss中嵌套的规则
 * 属性之间需要适当的空行，具体见属性声明顺序
 **/

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

4、空格

以下几种情况不需要空格	以下几种情况需要空格
属性名后	属性值前
多个规则的分隔符","前	选择器">", "+", "~"前后
!important "!"后	"{"前
属性值中"("后和")"前	!important "!"前
行末不要有多余的空格	属性值中的","后
注释"/*"后和"*/"前

/* 示例代码 */
.element,
.dialog {
  color: red !important;
  background-color: rgba(0, 0, 0, .5);
}

5、引号

最外层统一使用双引号；

url的内容要用引号；

属性选择器中的属性值需要引号。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

3.4 样式中属性

1、排序规则：先外部 > 再自身 > 后内部

推荐工具CSScomb，sublime 和 vscode 均有对应插件

 A. 影响文档流的属性（display, position, float, clear, visibility, table-layout等）

 B. 自身盒模型的属性（width, height, margin, padding, border等）

 C. 排版相关属性（font, line-height, text-align, text-indent, vertical-align等）

 D. 装饰性属性（color, background, opacity, cursor等）

 E. 生成内容的属性（content, list-style, quotes等）

2、属性简写

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；

margin 和 padding 相反，需要使用简写；

常见的属性简写包括：font background transition animation

/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

3.5 杂项

1、不允许有空的规则；

2、元素选择器用小写字母；

3、去掉小数点前面的0；

4、去掉数字中不必要的小数点和末尾的0；

5、属性值"0"后面不要加单位；

6、同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；

7、无前缀的标准属性应该写在有前缀的属性后面；

8、不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；

9、不要在一个文件里出现两个相同的规则；

10、用 border: 0; 代替 border: none;；

11、选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；

12、发布的代码中不要有 @import；

13、尽量少用"*"选择器。

三、 JavaScript规范（jslint/eslint） 3.1 JS文件引用

1、引入格式：

脚本语言发展至今，也只有js混的最好了，所以type="text/javascript"类型指定可以省去。

2、引入位置： body标签内最后部（非body外面）, 减少因载入脚本而造成其他页面内容阻塞的问题（js单线程）。

  
    
页面内容….
    
  

3、引入方式：html页面中禁止直接编写js代码，统一使用