目录
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'