CSS规范
1、书写规范
代码缩进：空四个空格
选择器单独占一行，每个属性及属性值占一行，属性结束用分号 ；
{ } 上下不要加空行，} 单独占一行，每组属性之间空一行
按组件块编写样式，并添加相应的注释
注释统一用/**/
对于属性值或颜色参数，小于 1 的省略前面的 0
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
避免为 0 值指定单位，例如，用 margin: 0; 代替margin: 0px;
2、声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
- Positioning
- Box model
- Typographic
- Visual
3、媒体查询的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
4、带前缀的属性
当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑
5、属性简写
在需要显示地设置所有值的情况下,使用简写形式：
paddingmarginfontbackgroundborderborder-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 文件中。
附加说明，常见缩写及命名，下载查看：
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、字符编码设置
<meta charset="utf-8">
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
<input type="text" disabled>
<input type="checkbox" value="1" 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。
参考文档
腾讯前端团队代码规范
https://www.kancloud.cn/digest/code-guide/42603
isobar前端代码规范
https://coderlmn.github.io/code-standards/
关于属性简写的一篇文章
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
http://twitter.github.io/recess/
https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
命名规范
1、项目命名
项目名全部小写，用破折号做连接符
例如：super-employer
2、目录命名
目录名全部小写
常用目录名：asset , src ,dist , img , css , js , module , model , data , service ....
3、文件命名
文件名全部小写，用下划线做连接符
例如：retina_sprites.css
error_report.html
4、class, id 命名
- 类名使用小写字母，以破折号分隔
- id采用驼峰式命名
- scss中的变量、函数、混合、placeholder采用驼峰式命名
5、js变量命名
- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
- 'ID'在变量名中全大写
- 'URL'在变量名中全大写
- 'Android'在变量名中大写第一个字母
- 'iOS'在变量名中小写第一个，大写后两个字母
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象推荐以'$'开头命名