web开发规范

良好的代码结构,使代码清晰,易读,优雅。

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() {
  
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容