关于前端代码基本命名规范与格式规范

一、

HTML

命名规范及格式规范

1、

html

代码中所有的标签和属性应该都是小写(虽然大写不会错,但

w3

建议都是小写)

2、在

html

代码中

id

多个单词要用下划线

_

连接,例如:

reader_info

3、在

html

代码中

clss

多个单词用中划线

-

连接,例如:

reader-info

4、如果仅仅是给

js

调用的

class

那么就在

class

的属性前加上

js

,例如:

js-active

5、不管是

id

还是

class

都使用父子关系来表示(引入父节点的拼接子节点的)

<div id="reader">
<div id="reader_introduce" class="reader-introduce"></div>
</div>

6、如果元素包含子元素,那么首位就要单独占一行(常见

a

标签里面套

img

)

<!--不推荐-->
<ul><li>第一个</li></ul>
<!--推荐使用-->
<ul>
<li>第一个</li>
</ul>

7、适当的添加点注释,注释要占一行

8、全部使用双引号

二、关于

css

的命名规范及格式规范

1、类名关键字之间连接用中划线

-

拼接

2、为了避免

class

命名的重复,命名时候取父元素的

class

作为前缀

3、多个选择器生命,每一个

css

选择器都单独占一行

h2,
h3,
h4 {
color: #ddd;
}

4、合理的使用注释

头部注释包括文件的版本、版本信息、作者、时间等

模块注释要有开始有结束

解释性注释要单独占一行

三、关于

javascript

的命名规范及格式规范

1、局部变量命名才用驼峰式命名

2、如果是

jQuery

的变量使用

$

为前缀

3、在

for

循环和

if

语句中左边的大括号应该在行的结束位置,不应该单独一行

4、在

javascript

中字符串可以使用单引号与双引号，但是建议是用单引号

5、合理的分号作为结束符

当有换行符（包括含有换行符的多行注释）会自动加上分号

当有}时，如果缺少分号，会补分号

当程序源代码结束时，如果缺少分号，会补分号

6、如果只有一行注释就使用单行注释，多行的就使用多行注释