通用规范
文件编码
所有文件都使用无 BOM 的 UTF-8 编码。
缩进
使用4个空格缩进。
Tab 在不同的操作系统下长度可能不同,为了代码在任何情况下都缩进一致要使用空格。
在所有的IDE工具中,都可以设置1个Tab键转换成4个空格,这样就可以敲一个Tab键输出4个空格。
注释
书写注释,方便维护。
注释内容两边要各有一个空格。
省略协议头
省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: ),这样可以同时兼容 http 和 https 。如果不是这两个声明的URL则不省略。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 省略http/https协议头 --> <img src="//www.xxx.com/x.jpg"> </body> </html>
项目名、目录名和文件名
项目名、HTML文件名、CSS/Sass文件名、JS文件名,全部采用小写方式, 多个单词之间以中划线分隔。
HTML 规范
文档声明
使用HTML5文档声明。”DOCTYPE”大小写均合法,但建议大写,这样看上去更专业。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
大小写
所有元素和属性名都小写。
为根元素指定 lang 属性
为文档设置正确的语言,将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则。
“en”代表英文;”zh-CN”代表简体中文。
字符编码
毫无疑问,采用UTF-8编码。
使用UTF-8编码,就不需要使用类似 — 、 ” 和 ☺ 等的实体引用。
明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。
“UTF-8”大小写均合法,但建议大写。
属性
属性值使用双引号
属性值不管使用双引号还是单引号,浏览器都会解析成双引号,所以如果使用单引号的属性值中含有双引号就会出错。
布尔型属性不用赋值
属性顺序
属性应当按照以下给出的顺序依次排列,确保代码的易读性:
(1) class
(2) id
(3) name
(4) data-*
(5) src, for, type, href, value, max-length, max, min, pattern
(6) placeholser, title, alt
(7) aria-*, role
(8) required, readonly, disabled
启用 IE Edge 模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Document</title> </head> <body> </body> </html>
排版
嵌套元素应当缩进
尽量避免多余父元素
不要在自闭合元素的尾部添加斜线
不要省略可选的结束标签
行末不要有空格
id 和 class
id和class的使用场景
id用于页面中独一无二的、特定的元素。
用于布局的元素用class,不管是不是在页面中唯一。
id 和 class命名
id 和 class 的名称一律小写,多个单词以中划线(不是下划线)连接。
名称反映功能。
JavaScript生成标签
在 JavaScript 文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。
结构、样式、行为分离
确保结构(HTML)、样式(CSS)、行为(js)相分离,即以外部引入的方式引用css文件和js文件,避免内联和行内css、js代码。
引入css文件和js文件不需要指定type属性,因为 text/css 和 text/javascript 分别是它们的默认值。
js文件应当放在页面末尾。
提供有关页面的元信息
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name=”description” content=” ”> <meta name=”keywords” content=” ”> <meta name=”author” content=” ”> <title>Document</title> </head> <body> </body> </html>
使用HTML5新语义标签
CSS 规范
每个选择器单独占一行
每条声明独占一行
这是为了获得更准确的错误报告。对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。
声明块的左花括号前添加一个空格
声明块的右花括号应当独占一行
声明语句的 : 后应该插入一个空格
声明语句以分号结尾
最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
以逗号分隔的属性值,逗号后面插入一个空格
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。
这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
#div { background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
省略小于 1 的小数前面的 0
十六进制值全部小写
使用简写形式的十六进制值
为选择器中的属性添加双引号
例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
避免为 0 值指定单位
属性顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
(1) Positioning
(2) Box model 盒模型
(3) Typographic 排版
(4) Visual 外观
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }
将媒体查询放在相关规则的附近
不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。
当使用带特定厂商前缀的属性时,属性的值垂直对齐
.selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
不要使用@import
选择器的性能
(1)使用 classe 而不是通用元素标签来优化渲染性能。
(2)避免在经常出现的组件中使用一些属性选择器 (例如,[class^="..."])。浏览器性能会受到这些情况的影响。
(3)减少选择器的长度,每个组合选择器选择器的条目应该尽量控制在 3 个以内。
代码组织
(1) 以组件为单位组织代码。
(2) 制定一个一致的注释层级结构。
(3) 使用一致的空白来分割代码块,这样做在查看大的文档时更有优势。
JavaScript规范
没有比这个更好的了:https://github.com/airbnb/JavaScript
杂项
保证favicon可访问
在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一:
(1)在 Web Server 根目录放置 favicon.ico 文件。
(2)使用 link 指定 favicon:<link rel="shortcut icon" href="path/faviconName.ico">