目录
html规范
代码缩进
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
元素属性
CSS规范
代码格式化
代码大小写
选择器
代码易读性
属性书写顺序
js规范
命名规范
代码缩进
代码可读性
字符串
html规范
代码缩进
统一使用2个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
<div class="jdc">
<a href="#"></a>
</div>
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
<div class="demo"></div>
不推荐：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
元素属性
元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐：
<input type="text">
<input type="radio" name="name" checked="checked" >
不推荐：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
不推荐：
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素与标题元素只能嵌套内联元素
推荐：
<h1><span></span></h1>
<p><span></span><span></span></p>
不推荐：
<h1><div></div></h1>
<p><div></div><div></div></p>
CSS规范
代码格式化
推荐：
.jdc{
display: block;
width: 50px;
}
不推荐：
.jdc{ display: block;width: 50px;}
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，类名可用' - '隔开，属性字符串允许使用大小写。
/* 推荐 */
.jdc {
display:block;
}
.jdc-html {
display:block;
}
/* 不推荐 */
.JDC {
DISPLAY:BLOCK;
}
.jdcHtml {
DISPLAY:BLOCK;
}
选择器
不使用 ID 选择器
不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
#jdc {}
.jdc div{}
代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格，末尾加分号
推荐：
.jdc {
width: 100%;
}
不推荐：
.jdc{
width:100%;
}
逗号分隔的取值，逗号之后一个空格
推荐：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐：
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
为单个css选择器或新申明开启新行
推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
不推荐：
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
属性书写顺序
建议遵循以下顺序：
布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
js规范
命名规范
标准变量、函数名采用小驼峰命名法，构造器、类用大驼峰
ID 在变量名中全大写
常量全大写，用下划线连接；构造函数，大写第一个字
let thisIsMyName;
let goodID;
let reportURL;
let AndroidVersion;
let iOSVersion;
let MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
class User {
constructor(options) {
this.name = options.name;
}
}
代码缩进
使用 2 个空格作为缩进
代码可读性
隔开函数签名，括号两边用空格隔开。
推荐
const x = function () {};
const y = function a() {};
不推荐
const f = function(){};
const g = function (){};
const h = function() {};
使用空格把运算符隔开。
推荐
const newName = 'CKS';
不推荐
const newName='CKS';
大括号内部加空格，圆括号和中括号内部不要空格。
推荐
const foo = { clark: 'kent' };
const foo = [1, 2, 3];
console.log(foo[0]);
不推荐
const foo = {clark: 'kent'};
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
避免不必要的三元表达式语句。
推荐
const foo = a || b;
const bar = !!c;
const baz = !c;
不推荐
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
字符串
字符串统一使用单引号的形式 ''
// bad
const department = "JDC"
// good
const department = 'JDC'
