良好的代码结构,使代码清晰,易读,优雅。
Tab:遵循2个空格大小
HTML:
1.HTML5文件头声明:<!DOCTYPE html>
2.HTML5自闭合标签,不加“/”。如:<input type=“text”>
3.区域语言标识统一加在<html>上。如:<html lang="zh-CN">
4.代码结构,如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="images/favicon.ico">
<title></title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/main.js"></script>
</body>
<!--
Project main html
author: BGOnline
version 1.0 2016-5-10
-->
</html>
CSS:
1.每个声明块的左花括号前添加一个空格。
2.对于只包含一条语句的声明块,在一行内显示。如:a { color: red };
3.多行语句的声明块,右花括号应该单独成行。如:
a {
color: red;
font-size: 12px;
}
4.所有声明语句都应当以分号结尾,不然代码可能更易出错。很多同学写CSS的时候,声明块的最后一条
语句不喜欢加“;”,这里应该注意一下。
5.以逗号分隔的属性值,每个逗号后面都应该插入一个空格。如:, box-shadow
6.属性值省略小于 1 的数前面的 0。如:用.5 代替 0.5;-.5px 代替 -0.5px
7.十六进制值应该全部小写。如:#fff
8.尽量使用简写形式的十六进制值,如:用 #fff 代替 #ffffff
9.参数值为的0,不指定单位。如:用 margin: 0; 代替 margin: 0px;
10.不要使用 @import,与 <link> 标签相比,@import 指令要慢很多,这样会导致不可预料的问题。
11.当使用带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。如:
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
12.尽量限制使用简写形式的属性声明。如:用padding-left: 2px; 代替 padding: 0 0 0 2px;
JavaScript:
1.通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。
2.对于function,for,if else,switch,while ...在“{”前加空格,并不提倡在“(”前加空格。如:
if(a) {
}
3.以逗号分割的参数,在逗号后面加空格。如:test(a, b, c);
4.运算符左右应该以空格分割,但自增与自减除外。如:a + b == c ? a++ : a--;
5.所有函数块以“;”分割,最好在函数最前面也应该加分号,避免与其他不规范的代码冲突。如:
;(function() {
});