发布于 

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;

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.