标签：web前端编码规范
通用规范
文件编码
所有文件都使用无 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规范
杂项
保证favicon可访问
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：
(1)在 Web Server 根目录放置 favicon.ico 文件。
(2)使用 link 指定 favicon：<link rel="shortcut icon" href="path/faviconName.ico">
Web前端编码规范
标签：web前端编码规范
原文地址：http://blog.csdn.net/wozaixiaoximen/article/details/45180421
