HTML+CSS+JS代码规范

HTML+CSS+JS代码格式规范

1.为什么要按照规范写代码

☞代码规则

1	编译器在编译时就会报错，这个规定叫作规则

☞代码规范

1	有一种规定，它是一种人为的、约定成俗的，即使不按照那种规定也不会出错，这种规定就叫作规范

☞代码规范化的好处

1	规范的代码可以减少bug处理，规范的代码可以降低维护成本，规范的代码有助于代码审查。

2. HTML代码规范介绍

1.嵌套元素应当缩进一次（即两个空格）

1
2
3

<div>
	<p></p>
</div>

2.对于属性的定义，确保全部使用双引号，不要使用单引号。

1

<div class="username"></div>

3.单标签中不要添加‘/’结束

1
2

<br> 
备注： html5中提示可以加可以不加

4.不能省略双标签的结束的标签

1

<div></div>

5.在引入CSS文件和JS文件时候，不需要指定type属性

1
2
3
4
5

<style></style>

<script></script>

备注：type属性属于以上标签的默认值

6.标签使用过程中，要遵循标签的语义化

7.标签设置属性的时候，要按照顺序依次设置，保证代码易读性

1

<div class=""  id=""  name=""></div>

3.CSS代码规范介绍

1. 为了代码的易读性，在每个声明块的左花括号前添加一个空格，且单独成行

1
2
3

选择器 {
    
}

2.每条声明语句的：后应该插入一个空格,且以封号结束

1
2
3

选择器 {
    color: red;
}

3.避免为 0 值指定单位

1
2
3

选择器 {
    margin: 0;
}

4. 声明顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1. 定位
2. 盒子模型
3. 其他内部属性

例如：
div {
    position: absolute;
    left: 0;
    top: 0;
    
    width: 200px;
    height: 200px;
    
    font-size: 12px;
    text-align: center;
}

5. 选择器

1
2

1.优先选择类选择器，有利于渲染性能优化
2.选择器层级不能太高，最多不要超过3个

4.js语法规范

☞定义变量后要空行,在定义变量的同时初始化该变量

1	var num = 123;

☞函数名之后不要留空格

1	function fn() { }

☞单目运算符 !、~、++、－－、－、*、& 等前后不加空格

☞声明数组使用[]

1	var ary = [];

☞通常能用CSS实现的效果要避免使用JS来实现

☞变量要使用驼峰命名法，使用名词结构

1 2 3 4

var userName = 'zs' 备注： 1. 首字母小写，后面单词首字母大写

☞构造函数使用帕斯卡命名法

1 2 3

function Person() {} 备注： 1. 所有单词都以大写字母开始

☞对象属性命名必须唯一

1 2 3 4

var obj { age: 12, height: 170 }

☞在同一个作用域下，变量名和方法名不要重复

1 2	var fn = 12; function fn() {}

☞每一个方法之间空一行

1 2 3

function fn() {} function fn1() {}

☞运算符前后需要添加空格

1 2	var a; var b = a;

☞紧挨着圆括号内不需要加空格

1	for(var i = 1; i <= 10; i++) {}

☞三目运算符用来进行条件性的赋值，不要用来当做简写的 if 语句使用。

1	var a = a >= 10? a : 10;