一、HTML规范
HTML头部文档类型
建议使用 text/html 格式的 HTML
避免使用XHTML，因为XHTML以及它的属性，比如application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限
<!DOCTYPE html>
IE 兼容模式
优先使用最新版本的IE 和 Chrome 内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
移动端样式书写规范
尽可能使用以屏幕宽度为参照的等比例布局 以js根据屏幕宽度动态计算根元素font-size 变换 rem 与 px 换算比例，做到等比缩放定义 viewport 为移动端设备优化，设置可见区域的宽度和初始缩放比例,禁止用户手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
HTML标签的闭合
1、自闭合的标签无需闭合，如：<input>、<img>、<br>、<meta>、<link>、<hr>等
不推荐方式：<input type="text" name="antzone"/></input>
推荐的方式：<input type="text" name="antzone"/>
2、可选闭合标签建议闭合，如：<body>、<li>
3、闭合标签必须闭合
HTML基本格式
HTML页面使用双引号，标签和标签属性统一使用小写形式
缩进
缩进使用soft tab（4个空格），嵌套的节点应该缩进
HTML标签嵌套规则
1、HTML4/XHTML的嵌套规则
（1）内联元素不能嵌套块元素
（2）<p>元素和<h1>~<h6>元素不能嵌套块元素
（3）ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt、dd
（4）a标签不能嵌套a
2、HTML5元素嵌套规则
（1）元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）
（2）使用语义化标签，尽量少的使用毫无意义的标签，仅仅用于设置样式，语义化的HTML结构，有助于搜索引擎理解，另一方面多人协作时，能迅速了解开发者意图
HTML多媒体回溯
页面中的图片、视频和canvas 动画等都要确保有替代的显示内容
图片文件我们可采用有意义的备选文本（alt属性规定），视频和音频文件我们可以为其加上说明文字或字幕
例如：<img src="antozen.jpg" alt="网络图谱">
代码格式规则
（1）每一个块状元素，列表元素和表格元素后，加上一新空白行
（2）内联元素写在一行内，块状元素还有列表和表格要另起一行
内容、表现和行为分离
尽量在文档和模板中只包含结构性的HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中
此外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件
主要规则如下:
（1）页面中尽量不要引入超过两个样式表，例如main.css和vendor.css
（2）页面中保证只引入一个js文件（如果有多个文件，将它们合并压缩后引入）
（3）不要使用内联样式和内部样式
（4）不要使用表象元素，例如<b>, <u>, <center>, <font>和<b>等
（5）不使用元素中表象的属性，例如align="center"
结构的搭建
（1）采用HTML5标准时开头应该加上<!DOCTYPE html>
（2）应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息
（3）在<body>标签的末尾引入JavaScript文件，这样可以在页面显示之后再编译JavaScript文件，以加快页面读取速度，同时有助于JavaScript对页面中的元素进行操作
（4）对元素的操作应添加在JavaScript代码中，而不要在HTML中添加
HTML布尔属性值
HTML5规范中 disabled、checked、selected 等属性不用设置值
HTML代码注释
如果可能尽量不写注释，尽可能减少文档的体积；如果必须要添加注释，那么就要遵循如下规则:
（1）详尽注释，解释代码解决问题、解决思路、是否为新鲜方案等
（2）模块注释，github建议不使用模块结束注释
（3）待办注释，TODO:待办事项
特别说明:注释文本与两端（--）之间要有一个空格
网页标签语义化
如何判断网页标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性
语义化标签注意的一些问题：
（1）尽可能少的使用无语义标签div和span
（2）语义不明显时，可用p也可用div的地方，尽量使用p，因为p默认有上下边距，去除样式后的可读性更好，对兼容特殊终端有利
（3）不要使用纯样式标签，例如bfontu,改用CSS设置语义上强调的文本可以包在strong和em标签里，strong的默认样式是加粗，而em的默认样式是斜体
属性
1.HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class(首位)
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role
2.id 和 class
（1）class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位
（2）id一般用于网页大致布局，比如标志、导航、主体内容、版权，规范命名为#logo , #nav, #content ,#copyright
（3）一般项目中class用于css中，id被js用来操作dom且不添加样式，（jq操作class一般不加样式）
二、JavaScript规范
缩进
使用tab缩进，4个字节（空格）
分号
以下几种情况后需加分号：
1、变量声明
2、表达式
3、return
4、throw
5、break
6、continue
7、do-while
空格
以下几种情况不需要空格：
1、对象的属性名后 前缀一元运算符后
以下几种情况需要空格：
1、二元运算符前后
2、三元运算符'?:'前后
3、代码块'{'前
4、下列关键字前：else, while, catch, finally
5、下列关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
6、单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后
7、对象的属性值前
8、for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
8、无论是函数声明还是函数表达式，'{'前一定要有空格
9、函数的参数之间
10、后缀一元运算符前
11、函数调用括号前
12、无论是函数声明还是函数表达式，'('前不要空格
13、数组的'['后和']'前
14、对象的'{'后和'}'前
15、运算符'('后和')'前
空行
以下几种情况需要空行：
1、变量声明后（当变量声明在代码块的最后一行时，则无需空行）
2、注释前（当注释在代码块的第一行时，则无需空行）
3、代码块后（在函数调用、数组、对象中则无需空行）
4、文件最后保留一个空行
换行
换行的地方，行末必须有','或者运算符；
以下几种情况不需要换行：
1、下列关键字后：else, catch, finally 代码块'{'前
以下几种情况需要换行：
1、代码块'{'后和'}'前
2、变量赋值后
原始值
1、字符串应当始终使用双引号且保持一行
2、特殊值null在以下情况下可用：
（1）用来初始化一个可能被赋值为对象的变量时使用
（2）用来和一个已经初始化的变量比较，这个变量有可能是对象
（3）当函数的参数期望是对象时，被用作参数传入
（4）当函数的返回值期望是对象时，被用作返回值传入
（5）其余情况避免使用null
3.避免使用特殊值undefined。判断一个变量是否定义应当使用typeof操作符
运算符间距
二元运算符前后必须使用一个空格保持表达式整洁，操作符包括运算符和逻辑运算符
var found = (value[i] === item);
if(found && (count > 10)){
doSomething();
}
对象直接量
1、起始左花括号应当同表达式保持一行
2、每个属性的名值对应当保持一个缩进，第一个属性应当在左花括号后另起一行
3、每个属性的名值对使用不含引号的属性名，其后紧跟冒号（之前不含空格）
4、若属性值是函数类型，函数体在属性名之下另起一行，而且其前后均应保留一个空行一组相关属性前后可插入空行提升代码的可读性
5、结束的右花括号独占一行
var object = {
key1:value1，
key2:value2，
func:function() {
// doSomething
}，
key3 = value3
}；
6、当对象字面量作为函数参数时，若值是变量，起始花括号应当同函数名在同一行
doSomething({
key1:value1,
key2:value2
});
注释
1.单行注释
（1）独占一行的注释，用来解释下一行代码
（2）在代码行的尾部的注释，用来解释它之前的代码
（3）多行，用来注释掉一个代码块
（4）代码行尾单行注释的情况，应该确保代码结尾同注释之间至少一个缩进
（5）单行注释之前要空格
if (condition) {
// 如果代码执行到这里，表明通过了安全检查
allowed();
}
行内注释
var result = something + somethingElse; // 行内注释
2.多行注释
（1）首行仅仅包括/注释开始，该行不应当有其他内容
（2）接下来的行以开头并保持左对齐，这些行可以文字描述
（3）最后一行以*/开头并同先前行保持对齐，不应该有文字
（4）注释前空行，星号后空格
if (condition) {
/*
* 如果代码执行到这里
* 说明通过了所有检测
*/
allowed();
}
函数声明
1、函数名和开始圆括号之间不应该有空格
2、结束圆括号和右边起始花括号应该有空格，右侧花括号和函数关键字保持一行
3、参数名之间应当有在逗号之后保留一个空格
4、立即被调用的函数应当在调用的外层用圆括号包裹
function outer(arg1, arg2){
var count = arg1,
name = arg2,
found = false,
empty;
function inner(){
//代码
}
//调用inner()的代码
}
命名
1、变量命名应当采用小驼峰命名格式，首字母小写，每个单词首字母大写，第一个单词应当是一个名词，不要在变量命名中使用下划线
2、函数命名也采用小驼峰命名格式，首字母小写，第一个单词应当是动词，和变量名进行区分
3、构造函数命名采用大驼峰命名格式，首字母大写，以非动词开头
4、常量的命名应当是所有字母大写，不同字母之间用单个下划线隔开
5、对象的属性和方法命名同变量和函数，私有属性或者方法，在前面加一个下划线
数组、对象
1、对象属性名不需要加引号；
2、对象以缩进的形式书写，不要写在一行；
3、数组、对象最后不要有逗号。
赋值
给变量赋值时，如果右侧是含有比较语句的表达式，需要用圆括号包裹
等号运算符
使用===（严格相等）和！==（严格不相等）替代相等（==）和不等（！=）来避免弱类型转换错误
三元操作符
三元操作符应当仅仅用在条件赋值语句中，而不要作为if语句的替代品
var value = condition ？ value1 ： value2;
语句
1、简单语句
每行最多只包含一条语句，所有简单的语句以分号（；）结束
2、复合语句
（1）括起来的语句应当比较复合语句多缩进一个层级
（2）开始的大括号应当在复合语句所在行的末尾；结束的大括号独占一行，且与符合语句开始保持同样的缩进
（3）若是if语句开始的关键字，其后紧跟一个空格，起始大括号在空格之后
if语句
if (condition) {
statements
}
绝不允许在if语句中省略花括号，单行语句同样需要花括号
if (condition) {
statements
} else if (condition) {
statements
} else {
statements
}
for语句
for语句的初始化部分不应该有变量声明
var i,len;
for (i=0, len=10; i < len; i++){
//代码
}
当使用for-in语句时，记得使用hasOwnProperty()进行双重检查来过滤出对象的成员
switch语句
switch (value) {
case 1:
/*falls through,No break*/
case 2:
doSomething();
break;
case 3:
return true;
default:
throw new Error ("This shouldn't happen");
}
jshint
1、用'===', '!=='代替'==', '!='；
2、for-in里一定要有hasOwnProperty的判断；
3、不要在内置对象的原型上添加方法，如Array, Date；
4、不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
5、变量不要先使用后声明；
6、不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
7、不要在同个作用域下声明同名变量；
8、不要在一些不需要的地方加括号，例：delete(a.b)；
9、不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
10、不要声明了变量却不使用；
11、不要在应该做比较的地方做赋值；
12、debugger不要出现在提交的代码里；
13、数组中不要存在空元素；
14、不要在循环内部声明函数；
15、不要像这样使用构造函数，例：new function () { ... }, new Object；
留白
1、两行空行如下情况使用
（1）在不同的源代码文件之间
（2）在类和接口定义之间
2、单行空行如下情况使用
（1）方法之间
（2）方法中局部变量和第一行语句之间
（3）多行或者单行注释之前
（4）方法中逻辑代码块之间以提升代码的可读性
3、空格在如下情况下使用
（1）关键字后跟括号的情况应当用空格隔开
（2）参数列表中逗号之后应当保留一个空格
（3）所有的除了点（.）之外的二元运算符，其操作数都应该用空格隔开。单目运算符的操作数之间不应该用空白隔开
（4）for语句中的表达式之间应当用空格隔开
其他
1、不要混用tab和space；
2、不要在一处使用多个tab或space；
3、换行符统一用'LF'；
4、对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；
5、行尾不要有空白字符；
6、switch的falling through和no default的情况一定要有注释特别说明；
7、不允许有空的代码块。
三、CSS
样式编写规范
1、布局以流式布局为主，禁止滥用绝对定位，只在有必要的时候才使用绝对定位
2、样式书写区分全局样式，布局样式，单元样式，页面私有样式，
3、页面私有样式应写在页面scoped 私有class下面
4、单元样式的选择器不许包含页面私有的class及布局class，以便于单元样式的复用
5、装饰性的背景图尽量写在样式里，源于风格样式和内容区分的思想
6、建议使用预处理样式 stylus 或scss,建立基础预定义样式文件:
（1）reset//样式重置
（2）variables//变量文件，包括如color，btn size，风格相关的颜色、尺寸应定义在variables 里面，便于定义与切换风格
（3）mixins//混合样式定义
（4） index//全局样式定义
（5）公有样式文件 public.styl 依次引用 reset.styl variables.styl mixins.styl global.styl
7、统一定义字体大小如： medium normal large small mini 类，全局统一定义字体大小（大多数地方）
8、图标建议统一使用字体文件或者SVG文件
9、如非必要，不让选择器深度超过3层
以下几种情况不需要空格：
1、属性名后
2、多个规则的分隔符','前
3、!important '!'后
4、属性值中'('后和')'前
5、行末不要有多余的空格
以下几种情况需要空格：
1、属性值前
2、选择器'>', '+', '~'前后
3、'{'前
4、!important '!'前
5、@else 前后
6、属性值中的','后
7、注释'/'后和'/'前
需要换行的情况：
1、'{'后和'}'前
2、每个属性独占一行
3、多个规则的分隔符','后
注释
注释统一用'/* */'（scss中也不要用'//'）
缩进与下一行代码保持一致
可位于一个代码行的末尾，与代码间隔一个空格
引号
1、最外层统一使用双引号
2、url的内容要用引号
3、属性选择器中的属性值需要引号
命名
1、类名使用小写字母，以中划线分隔
2、id采用驼峰式命名
3、scss中的变量、函数、混合、placeholder采用驼峰式命名
属性声明顺序
1、文档流相关属性（display, position, float, clear, visibility, table-layout）
2、盒模型相关属性（width, height, margin, padding, border）
3、排版相关属性（font, line-height, text-align, text-indent, vertical-align）
4、装饰性相关属性（color, background, opacity, cursor）
5、文字排版（font, line-height, letter-spacing, color- text-align）
6、生成内容相关属性（background, border）
注：每块属性定义完成后，使用空行与另一属性块区别
颜色
1、颜色16进制用小写字母
2、颜色16进制尽量用简写
属性简写
1、属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；
2、margin 和 padding 相反，需要使用简写；
/* not good */
.element {
transition: opacity 1s linear 2s;
}
/* good */
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}
媒体查询
尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们
SCSS相关
1、提交的代码中不要有 @debug
2、声明顺序：
（1）@extend
（2）不包含 @content 的 @include
（3）包含 @content 的 @include
（4）自身属性
（5）嵌套规则
3、@import 引入的文件不需要开头的'_'和结尾的'.scss'；
4、嵌套最多不能超过5层
5、@extend 中使用placeholder选择器
6、去掉不必要的父级引用符号'&'
其他
1、不允许有空的规则；
2、元素选择器用小写字母；
3、去掉小数点前面的0；
4、去掉数字中不必要的小数点和末尾的0；
5、属性值'0'后面不要加单位；
6、同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照下边的写法；
7、无前缀的标准属性应该写在有前缀的属性后面；
8、不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
9、不要在一个文件里出现两个相同的规则；
10、用 border: 0; 代替 border: none;；
11、选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；
12、发布的代码中不要有 @import；
13、尽量少用'*'选择器。
网友评论