文件/资源命名
在 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 的结束符,代码的缩进是否整齐等等。