制定自己的前端编码规范
2018-02-18 本文已影响0人
三娃头很铁
一、代码缩进：tab键设置四个空格
二、页面的第一行添加标准模式声明
<!DOCTYPE html>
三、html 根元素指定 lang 属性，从而为文档设置正确的语言
<html lang="en-US"> 或 <html lang="zh-CN">
四、整个html中，只有开头的DOCTYPE，lang，meta三个地方可以大写，其他均为小写
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
</html>
五、IE兼容模式，非特殊情况不加
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
六、HTML 中自闭合元素的标签不要斜线，
使用： <br>
不使用：</br>,<br/>
七、根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时不需要指定 type 属性
八、尽量减少标签的使用，来降低复杂度
九、标签内属性顺序
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
1.class
2.id, name
3.data-*
4.src, for, type, href
5.title, alt
6.aria-*, role
十、注释标准
<!--注释内容--!>
十一、命名规范
默认全小写，默认使用"-"分隔符
图片：head-logo.png
css：bootstrap-3.3.5.js，js：jquery-1.11.3.js
仅 id 属性用 "_"：<p id="tb_head">id</p>，且 id 必须保证页面唯一
其余 属性用 "-" ：<p class="tb-head"; id="tb_head"; data-head="tb-head"> others </p>
class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。且不能有与id相同的命名
<!--正确--> <div class="sidebar"></div> <!--错误--> <div class="left"></div>
十二、不指定网络资源的协议
不要指定引入资源所带的具体协议 (http/https)，除非这两者协议都不可用。
不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。
<!--html 代码-->
<script src="//cdn.com/foundation.min.js"></script>
<!--css 代码-->
.example {
background: url(//static.example.com/images/bg.jpg);
}
