【规范】前端编码规范——一般规范
文件/资源命名
在 web 项目中，中划线（-）是用来分隔文件名的不二之选。同时它也是常见的 url 分隔符（比如：本文的 url）。所以理所当然的，中划线应该也是用来分隔资源名称的好选择。
尽量保证文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处。
文件的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
还有一些情况下，需要对文件增加后缀或特定的扩展名时（比如 .min.js, .min.css），这种情况下，建议使用点分隔符来区分。
不推荐：
MyScript.js myCamelCaseName.css i_love_underscores.html 1001-scripts.js my-file-min.css
推荐：
my-script.js my-camel-case-name.css i-love-underscores.html thousand-and-one-scripts.js my-file.min.css
结构目录
- images
- index（多页面的话可以分文件夹）
- body-bg.jpg
- header-bg.jpg
- main-bg.jpg
- body-bg.jpg
- header-bg.jpg
- main-bg.jpg
- index（多页面的话可以分文件夹）
- js
- common.js
- lib
- jquery.min.js
- sass
- core
- _common.scss
- _css3.scss
- _reset.scss
- _variables.scss
- _base.scss
- _common.scss
- _vars.scss
- _index.scss
- style.scss
- core
- index.html
编码格式
文件必须用 UTF-8 编码，使用 UTF-8（无 BOM），请保持 css 文件编码与页面编码一致。
协议
不要指定引入资源所带的具体协议。
当引入图片或其他媒体文件，还有样式和脚本时，url 所指向的具体路径，不要指定协议部分（http 和 https），除非这两者协议都不可用。
不指定协议使得 url 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。
不推荐：
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
.demo { background:url(http://xxx.com/images/bg.jpg); }
推荐：
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
.demo { background:url(//xxx.com/images/bg.jpg); }
文本缩进
无论是 html 还是 css 又或者是 js，都使用空格缩进，一次缩进 4 个空格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="keywords" content=""> <meta name="description" content=""> <title>Document</title> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
.demo { width:100px; height:100px; background:url(//xxx.com/images/bg.jpg); }
;(function(w, d, $){ var x = 10, y = 20; console.log(x + y); }(window, document, jQuery));
检查代码
每次写完 html 或者 css 或者 js，都应该检查一遍代码，看看是否有问题，比如 html 标签是否闭合，css 多余的类没有删除，js 的结束符，代码的缩进是否整齐等等。
