1、HTML代码命名规范及格式规范
1.1 HTML代码所有的标签名和属性应该都为小写,属性值应该使用双引号闭合。
<!--推荐示例-->
<img src="demo.ipg" alt="test"/>
1.2 给所有的关键元素定义元素的id和class,便于和CSS、JavaScript交互。id和class的命名一定要规范。
推荐:根据语义和DOM树的层级关系来定义合适的名称。名称中全部使用小写,id名称中的关键词用下划线(_)连接,class的关键词用中划线(-)连接。
<!--推荐示例-->
<div id="reader">
<div id="reader_introduce" class="reader-introduce">
...
</div>
</div>
1.3 如果class名称仅作为JavaScript调用的“钩子”,则可在名称中添加“js”前缀
<!--示例-->
<ul class="js-reader-menu">
<li class="menu-toc js-active">Toc</li>
<li class="menu-store js-active">Store</li>
</ul>
1.4 HTML代码的层级缩进为4个空格。如果元素包含子元素,则此子元素对应的起始标签和闭合标签分别单独占用一行。
<!--推荐示例-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
1.5 注释添加的位置在要注释的代码上部并单独占用一行,不要再代码行的后面直接添加。
<body>
<!--main header-->
<div id="reader_header">
...
</div>
<!--main content-->
<div id="reader_content">
...
</div>
</body>
2、CSS命名规范及格式规范
2.1 为了避免class命名的重复,命名时取父元素的class名作为前缀。
/*父元素的样式声明*/
.reader-content {
...
}
/*子元素的样式声明*/
.reader-content-body {
...
}
2.2 在CSS样式定义中,左大括号放置在选择器的同一行,并和选择器之间添加一个空格分隔;在样式声明中,属性名和值之间使用一个空格分隔。
/*推荐示例*/
.reader-content-title {
background: #fff;
...
}
2.3 多个选择器具有相同的样式声明时,每个选择器应该单独占一行,便于阅读和维护。
/*推荐示例*/
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
2.4 样式声明的顺序按字母顺序排序,不考虑浏览器前缀。建议使用一些CSS美化工具做样式声明的排序工作。
3、JavaScript命名规范及格式规范
3.1 JavaScript的局部变量命名采用首字母小写,其他单词字母大写的方式。
//推荐示例
var bookmarkDefaultTitle = 'Untitled Bookmark';
3.2 原则上公有接口的命名为首字母大写,私有接口的命名为首字母小写。
3.3 JavaScript中推荐使用单引号定义字符串。
//推荐示例
var content = '<span id="main_content">...';
3.4 JavaScript语句结束时应该添加一个分号。
3.5 单行注释建议使用//,多行注释使用/**/。