前端代码规范

CSS规范

1、书写规范

代码缩进：空四个空格

选择器单独占一行，每个属性及属性值占一行，属性结束用分号；

{ } 上下不要加空行，} 单独占一行，每组属性之间空一行

按组件块编写样式，并添加相应的注释

注释统一用/**/

对于属性值或颜色参数，小于 1 的省略前面的 0

十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

避免为 0 值指定单位，例如，用 margin: 0; 代替margin: 0px;

2、声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

3、媒体查询的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。

4、带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑

5、属性简写

在需要显示地设置所有值的情况下,使用简写形式：

padding
margin
font
background
border
border-radius

6、选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内。

补充说明css 多级class命名及选择器使用

简单的说就是最外层做命名空间，子集加前缀，css加唯一父级名(设置专有样式时能唯一选择就行了，还得灵活运用)，选择器最好不要超过三层嵌套

7、class命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s不能表达任何意思。（出一套常用简写）
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

附加说明，常见缩写及命名，下载查看：

HTML DIV+CSS 命名规范大全.txt

8、font-family默认设置

font-family: "PingFangSC", "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

HTML规范

1、Doctype 用标准H5写法，并添加语言代码属性默认用en

<!DOCTYPE html>

语言代码参考： https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

2、字符编码设置

3、嵌套缩进，四个空格 ,代码结构更清晰些

4、使用语义化标签，一方面提高代码的易读性，另一方面，对seo比较友好

如下是常用H5的一些语义化标签

header 元素

代表“网页”或“section”的页眉。

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。

也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

footer元素

footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息

hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

section元素

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级

article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。

5、标签属性使用双引号，属性名全部小写，属性要按顺序书写

属性顺序参照：

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
required, readonly, disabled

补充说明：

role属性，增强语义性，通常用于说明一个组件的用途，而aria-*的作用就是描述这个tag在可视化的情境中的具体信息

如： <div role="button" aria-checked="checked">这是一个按钮</div>

这两个属性说明这个是一个按钮，并且状态是选中状态

6、布尔类型的属性不用赋值如disable , checked

<select>

<option value="1" selected>1</option>

</select>

7、尽量减少标签嵌套和冗余的父元素，HTML嵌套层数最好不超过四层。

8、自动闭合标签结尾处要使用斜线

<img class="avatar" src="imgs/avator.png"/>

9、在引入CSS和JS时不需要指明 type，因为 text/css和 text/javascript 分别是他们的默认值

10、在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现

JS规范

1、缩进

使用soft tab（4个空格）。

2、单行长度

不要超过80，但如果编辑器开启word wrap可以不考虑单行长度。

3、分号

以下几种情况后需加分号：

变量声明
表达式
return
throw
break
continue
do-while

4、空格

以下几种情况不需要空格：

对象的属性名后
前缀一元运算符后
后缀一元运算符前
函数调用括号前
无论是函数声明还是函数表达式，'('前不要空格
数组的'['后和']'前
对象的'{'后和'}'前
运算符'('后和')'前

以下几种情况需要空格：

二元运算符前后
三元运算符'?:'前后
代码块'{'前
下列关键字前：else, while, catch, finally
下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后
对象的属性值前
for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
无论是函数声明还是函数表达式，'{'前一定要有空格
函数的参数之间

5、空行

以下几种情况需要空行：

变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
代码块后（在函数调用、数组、对象中则无需空行）
文件最后保留一个空行

6、换行

换行的地方，行末必须有','或者运算符；

以下几种情况不需要换行：

下列关键字后：else, catch, finally
代码块'{'前

以下几种情况需要换行：

代码块'{'后和'}'前
变量赋值后

7、单行注释

双斜线后，必须跟一个空格；

缩进与下一行代码保持一致；

可位于一个代码行的末尾，与代码间隔一个空格。

8、多行注释

最少三行, '*'后跟一个空格，具体参照右边的写法；

建议在以下情况下使用：

难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

9、文档注释

各类标签@param, @method等请参考usejsdoc和JSDoc Guide；

建议在以下情况下使用：

所有常量
所有函数
所有类

10、引号

最外层统一使用单引号。

11、变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

12、函数

无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；

函数调用括号前不需要空格；

立即执行函数外必须包一层括号；

不要给inline function命名；

参数之间用', '分隔，注意逗号后有一个空格。

数组、对象

对象属性名不需要加引号；

对象以缩进的形式书写，不要写在一行；

数组、对象最后不要有逗号。

13、括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。

// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

14、null

适用场景：

初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比较
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值

不适用场景：

不要用null来判断函数调用时有无传参
不要与未初始化的变量做比较

15、undefined

永远不要直接使用undefined进行变量判断；

使用typeof和字符串'undefined'对变量进行判断。

// not good

if (person === undefined) {

...

}

// good

if (typeof person === 'undefined') {

...

}

说明：防止对未定义的变量进行undefined判断出错

16、jshint

用'===', '!=='代替'==', '!='；

for-in里一定要有hasOwnProperty的判断；

不要在内置对象的原型上添加方法，如Array, Date；

不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；

变量不要先使用后声明；

不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；

不要在同个作用域下声明同名变量；

不要在一些不需要的地方加括号，例：delete(a.b)；

不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；

不要声明了变量却不使用；

不要在应该做比较的地方做赋值；

debugger不要出现在提交的代码里；

数组中不要存在空元素；

不要在循环内部声明函数；

不要像这样使用构造函数，例：new function () { ... }, new Object；

17、杂项

不要混用tab和space；

不要在一处使用多个tab或space；

换行符统一用'LF'；

对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；

行尾不要有空白字符；

switch的falling through和no default的情况一定要有注释特别说明；

不允许有空的代码块。

修改补充

关于CSS的权重（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

计算指定选择器的优先级：重新认识CSS的权重

通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类的权值为 0,0,1,0
属性选择的权值为 0,0,1,0
伪类选择的权值为 0,0,1,0
伪对象选择的权值为 0,0,0,1
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

从上面我们可以得出两个关键的因素：

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关

总结：

比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。

关于CSS的执行效率（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。
ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）

Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序：

1.id 选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul > li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低
详细的介绍大家还可以点击Writing efficient CSS selectors。