前言：每个公司都会有自己的编码规范，这样有助于代码的风格保持一致，容易被理解和被维护，以及方便项目之间的沟通交流与合作，以下规范仅做参考。
一、HTML编码规范
1 代码风格
1.1缩进与换行
使用4个空格作为一个缩进层级，不允许使用2个空格或tab字符。
1.2命名
class必须单词全字母小写，单词间以-分隔；
class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
元素id必须保证页面唯一。
id建议单词全字母小写，单词间以-分隔。同项目必须保持风格一致。
id、class命名，在避免冲突并描述清楚的前提下尽可能短。
禁止为了hook脚本，创建无样式信息的class。
（解释：不允许class只用于让JavaScript选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS class泛滥。使用id、属性选择作为hook是更好的方式。）
同一页面，应避免使用相同的name与id。
（解释：IE游览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。所以在对元素的id与name属性的命名需要非常小心。一个较好的实践是，为id和name使用不同的命名法。）
1.3标签
标签名必须使用小写字母。
对于无需自闭和的标签，不允许自闭合。
（解释：常见无需自闭合标签有input、br、img、hr等。）
标签使用必须符合标签嵌套规则。
（解释：比如div不得置于p中，tbody必须置于table中。）
HTML标签的使用应该遵循标签的语义。
解释：
下面是常见标签语义：
●p--段落
●h1,h2,h3,h4,h5,h6--层级标题
●strong,em--强调
●ins--插入
●del--删除
●abbr--缩写
●abbr--缩写
●code--代码标识
●cite--引述来源作品的标题
●q--引用
●blockquote--一段或长篇引用
●ul--无序列表
●ol--有序列表
●dl,dt,dd--定义列表
在CSS可以实现相同需求的情况下不得使用表格进行布局。
（解释：在兼容性允许的情况下，应尽量保持语义正确性。对网格对齐和拉伸有严格要求的场景允许例外，如多列复杂表单。）
标签的使用应尽量简洁，减少不必要的标签。
<img class="avatar" src="image.png">1.4属性
属性名必须使用小写字母。
<table cellspacing="0">...</table>属性值必须用双引号包围。
（解释：不允许使用单引号，不允许不使用引号。）
布尔类型的属性，建议不添加属性值。
<input type="checkbox" value="1" checked>自定义属性建议以xxx-为前缀，推荐使用data-。
(解释：使用前缀有助于区分自定义属性和标准定义的属性。)
<ol data-ui-type="Select"></ol>2 通用
2.1DOCTYPE
使用html5的doctype来启用标准模式，建议使用大写的DOCTYPE。
<!DOCTYPE html>启用IE Edge 模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">在html标签上设置正确的lang属性。
（解释：有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。）
<html lang="zh-CN">2.2编码
页面必须使用精简形式，明确指定字符编码。指定字符编码的meta必须是head的第一个子元素。
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html> HTML文件使用无BOM的UTF-8编码。
(解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。)
2.3CSS和JavaScript引入
引入CSS时必须指明rel="stylesheet"。
<link rel="stylesheet" href="page.css">引入CSS和JavaScript时无须指明type属性。
（解释：text/css和text/javascript是type的默认值。）
展现定义放置于外部CSS中，行为定义放置于外部JavaScript中。
（解释：结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。）
在head中引入页面需要的所有CSS资源。
（解释：在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。）
JavaScript应当放在页面末尾，或采用异步加载。
（解释：将script放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。）
建议：移动环境或只针对现代游览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。
3 head
3.1 title
页面必须包含title标签声明标题。
title必须作为head的直接子元素，并紧随charset声明之后。
（解释：title中如果包含ASCII之外的字符，游览器需要知道字符编码类型才能进行编码，否则可能导致乱码。）
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>3.2 favicon
保证favicon可访问。
（解释：在未指定favicon时，大多数游览器会请求Web Server根目录下的favicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
1.在Web Server根目录放置favicon.ico文件。
2.使用link指定favicon。）
<link rel="shortcut icon" href="path/to/favicon.ico">3.3 viewport
若页面欲对移动设备友好，需指定页面的viewport。
（解释：viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。
比如，在页面宽度小于980px时，若需iOS设备友好，应当设置viewport的width值来适应你的页面宽度。同时因为不同移动分辨率不同，在设置时，应当使用device-width和device-height变量。
另外，为了使viewport正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。）
4 图片
禁止img的src取值为空。延迟加载的图片也要增加默认的src。
（解释：src取值为空，会导致部分游览器重新加载一次当前页面。）
避免为img添加不必要的title属性。
（解释：多余的title影响看图体验，并且增加了页面尺寸。）
为重要图片添加alt属性。
（解释：可以提高图片加载失败时的用户体验。）
添加width和height属性，以避免页面抖动。
有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。
（解释：1.产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。
2.无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。）
5 表单
5.1 控件标题
有文本标题的控件必须使用label标签将其与其标题相关联。
（解释：有两种方式：
1.将控件置于label内；
2. label的for属性指向控件的id。）
推荐使用第一种，减少不必要的id。如果DOM结构不允许直接嵌套，则应使用第二种。
<label><input type="checkbox" name="confirm" value="on">我已确认上述条款</lable>
<label for="username">用户名：</lable><input type="textbox" name="username" id="username">5.2按钮
使用button元素时必须指明type属性值。
（解释：button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出type属性。）
<button type="submit">提交</button>
<button type="button">取消</button>尽量不要使用按钮类元素的name属性。
（解释：由于游览器的兼容性问题，使用按钮的name属性会带来许多难以发现的问题。）
5.3可访问性
负责主要功能的按钮在DOM中的顺序应靠前。
（解释：负责主要功能的按钮应相对靠前，以提高可访问性。如果在CSS中指定了float:right;则可能导致视觉主按钮在前，而DOM中主按钮靠后的情况。）
<style>
.button .button-group{
float:right;
}
</style>
<div class="buttons">
<div class="button-group">
<button type="submit">提交</button>
<button type="button">取消</button>
</div>
</div>当使用JavaScript进行表单提交时，如果条件准许，应使原生提交功能正常工作。
（解释：当游览器JS运行错误或关闭JS时，提交功能将无法工作。如果正确指定了form元素的action属性和表单控件的name属性时，提交仍可继续进行。）
<form action="/login" method="post">
<p><input name="username" type="text" placeholder="用户名"></p>
<p><input name="password" type="password" placeholder="密码"></p>
</form>在针对移动设备开发的页面时，根据内容类型指定输入框的type属性。
（解释：根据内容类型指定输入框类型，能获得能友好的输入体验。）
<input type="data">6多媒体
当在现代游览器中使用audio以及video标签来播放音频、视频时，应当注意格式。
（解释：
音频应尽可能覆盖到如下格式：
●MP3
●WAV
●Ogg
视频应尽可能覆盖到如下格式：
●MP4
●WebM
●Ogg ）
在支持HTML5的游览器中优先使用audio和video标签来定义音视频元素。
使用退化到插件的方式来对多游览器进行支持。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>只在必要的时候开启音视频的自动播放。
在object标签内部提供指示游览器不支持该标签的说明。
<object width="100" height="50" data="something.sef">DO NOT SUPPORT TAG</object>7 多媒体
模板代码的缩进优先保证HTML代码的缩进规则。
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}</li>
{foreach}
</ul>
</div>
{/if}模板代码应以保证HTML单个标签语法的正确性为基本原则。
<li class="{if$item.type_id == $current_type}focus{/if}">{$item.type_name}</li>
<li {if $item.type_id == $current_type} class="focus"{/if}>{$item.type_name}</li>在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。
<table>
{foreach $item_list as $item_group}
<tr>
{foreach $item_group as $item}
<td>{$item.name}</td>
{/foreach}
</tr>
{/foreach}
</table>二、CSS编码规范
1 代码规范
1.1 文件
CSS文件使用无BOM的UTF-8编码。
（解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。）
1.2 缩进
使用4个空格作为一个缩进层级。
1.3 空格
选择器与{ 之前必须包含空格。
.selector {
}属性名与之后的：之间不准许包含空格， : 与属性值之间必须包含空格。
margin: 0;列表行属性值 书写在单行时，, 后必须跟一个空格。
font-family:Arial, sans-serif;1.4 行长度
每行不得超过120个字符，除非单行不可分割。
（解释：常见不可分割的场景为URL超长。）
对于超长的样式，在样式值的空格处或，后换行，建议按逻辑分组。
1.5 选择器
当一个rule包含多个selector时，每个选择器声明必须独占一行。
.post,
.page,
.comment{
line-height:1.5;
}>、+、~选择器的两边各保留一个空格。
main > nav {
padding: 10px;
}
label + input {
margin-left: 5px;
}
input:checked ~ button {
background-color: #69c;
}属性选择器中的值必须用双引号包围。
（解释：不允许使用单引号，不允许不使用引号。）
article[character="juliet"] {
voice-family: "Vivien Leigh", victoria, female;
}1.6属性
属性定义必须另起一行。
.selector{
margin: 0;
padding: 0;
}属性定义后必须以分号结尾。
.selector {
margin: 0;
}2 通用
2.1 选择器
如无必要，不得为id、class选择器添加类型选择器进行限定。
（解释：在性能和维护上，都有一定的影响。）
#error,
.danger-message {
font-color: #c00;
}选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
#username input { }
.comment .avatar { }
2.2 属性缩写
在可以使用缩写的情况下，尽量使用属性缩写。
.post {
font: 12px/1.5 arial, sans-serif;
}建议使用border/margin/padding等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
（解释：border/margin/padding等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。）
/**centering <article class="page
" horizontally and highlight featured ones>**/
article {
margin: 5px;
border: 1px solid #999;
}
/*good*/
.page{
margin-left: auto;
margin-right: auto;
}
.featured {
border-color: #69c;
}
/*bad*/
.page {
margin: 5px auto;
}
.featured {
border:1px solid #69c;
}2.3 属性书写顺序
同一rule set下的属性在书写时，应按功能进行分组，并以Formatting Model（布局方式、位置） > Box Model（尺寸）> Typographic（文本相关） > Visual （视觉效果）的顺序书写，以提高代码的可读性。
解释：
●Formatting Model 相关属性包括：position/top/right/bottom/left/float/display/overflow等；
●Box Model相关属性包括：border/margin/padding/width/height等；
●Typographic相关属性包括：font/line-height/text-align/word-wrap等；
●Visual相关属性包括：background/color/transition/list-style等。
另外，如果包含content属性，应放在最前面。
.sidebar{
/*formatting model:positioning schemes/offsers/z-indexes/display/...*/
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/*box model: sizes/margins/paddings/borders/...*/
width: 200px;
padding: 5px;
border:1px solid #ddd;
/*typographic: font/shadows/gradients/...*/
font-size: 14px;
line-height: 20px;
/*visual: colors/shadows/gradients/...*/
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-mox-transition: color 1s;
transition: color 1s;
}2.4 清除浮动
当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用增加空标签的方式。
（解释：触发BFC的方式很多，常见的有：
●float非none;
●position非static;
●overflow非visible
另需注意，对已经触发BFC的元素不需要再进行clearfix。）
2.5 ！important
尽量不使用!important声明。
当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!important定义样式。
（解释：必须注意的是，仅在设计上确实不允许任何其他场景覆盖样式时，才使用内联的!important样式。通常在第三方环境的应用中使用这种方案。下面的z-index章节是其中一个特殊场景的典型样例。）
2.6 z-index
将z-index进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
（解释：同层的多个元素，如多个由用户输入触发的Dialog，在该层级内使用相同的z-index或递增z-index。
建议每层包含100个z-index来容纳足够的元素，如果每层元素较多，可以调整这个数值。）
在可控环境下，期望显示在最上层的元素，z-index指定为999999。
（解释：可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。
不建议取值为2147483647.以便于自身产品线被其他产品线引用，但是不会被外部第三方的产品引用。）
在第三方环境下，期望显示在最上层的元素，通过标签内联和！important，将z-index指定为2147483647。
（解释：第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。）
3 值与单位
3.1 文本
文本内容必须用双引号包围。
（解释：文本类型的内容可能在选择器、属性值等内容中。）
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: """;
}
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "";
}3.2 数值
当数值为0-1之间的小数时，省略整数部分的0。
panel {
opacity: .8;
}3.3 url()
url()函数中的路径不加引号。
body {
background:url(bg.png);
}url()函数中的绝对路径可省去协议名。
body{
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}3.4 长度
长度为0时须省略单位。（也只有长度单位可省）
body {
padding: 0 5px;
}3.5 颜色
RGB颜色值必须使用十六进制记号形式#rrggbb。不允许使用rgb()。
（解释：带有alpha的颜色信息可以使用rgba()。使用rgba()时每个逗号后必须保留一个空格。）
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
}颜色值可以缩写时，必须使用缩写形式。
.success {
background-color: #aca;
}颜色值不允许使用命名色值。
.success {
color: #90ee90;
}颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
/*good*/
.success {
background-color: #aca;
color: #90ee90;
}3.6 2D位置
必须同时给出水平和垂直方向的位置。
（解释：2D位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为center。为了避免理解上的困扰，应同时给出两个方向的值。）
body {
background-position: center top;
}4 文本编排
4.1 字体族
font-family属性中的字体族名称应使用字体的英文Family Name，其中如有空格，须放置在引号中。
（解释：所谓英文Family Name，为字体文件的一个元数据，常见名称如下：
| 字体 | 操作系统 | Family Name |
|---|---|---|
| 宋体 (中易宋体) | Windows | SimSun |
| 黑体 (中易黑体) | Windows | SimHei |
| 微软雅黑 | Windows | Microsoft YaHei |
| 微软正黑 | Windows | Microsoft JhengHei |
| 华文黑体 | Mac/iOS | STHeiti |
| 冬青黑体 | Mac/iOS | Hiragino Sans GB |
| 文泉驿正黑 | Linux | WenQuanYi Zen Hei |
| 文泉驿微米黑 | Linux | WenQuanYi Micro Hei |
h1 {
font-family: "Microsoft YaHei";
}font-family按【西文字体在前、中文字体在后】、【效果佳（质量高/更能满足需求）的字体在前、效果一般的字体在后】 的顺序编写，最后必须指定一个通用字体族(serif/sans-serif)。
/*Display according to platform*/
.article {
font-family: Arial, sans-serif;
}
/*Specific for most platforms*/
h1 {
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}font-family 不区分大小写，但在同一个项目中，同样的Family Name大小写必须统一。
/*good*/
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}4.2 字号
需要在Windows平台显示的中文内容，其字号应不小于12px。
（解释：由于Windows的字体渲染机制，小于12px的文字显示效果极差、难以辨认。）
4.3 字体风格
需要在Windows平台显示的中文内容，不要使用除normal外的font-style。其他平台也应慎用。
（解释：由于中文字体没有italic风格的实现，所有游览器下都会fallback到obilique实现（自动拟合为斜体），小字号下（特别是Windows下会在小字号下使用点阵字体的情况下）显示效果差，造成阅读困难。）
4.4 字重
font-weight属性必须使用数值方式描述。
（解释：CSS的字重分100-900共九档，但目前受字体本身和游览器的限制，实际上支持400和700两档，分别等价于关键词normal和bold。
游览器本身使用一系列启发式规则来进行匹配，在<700时一般匹配字体的Regular字重，>700时匹配Bold字重。但已有游览器开始支持=600时匹配Semibold字重，故使用数值增加了灵活性，也更简短。）
h1 {
font-weight: 700;
}4.5 行高
line-height在定义文本段落时，应使用数值。
（解释：将line-height设置为数值，游览器会基于当前元素设置的font-size进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了font-size都需要设置line-height。）
当line-height用于控制垂直居中时，还是应该设置成与容器高度一致。
.container {
line-height: 1.5;
}5 变换与动画
强制使用transition时应指定transition-property。
.box {
transition: color 1s, border-color 1s;
}尽可能在游览器能高效实现的属性上添加过渡和动画。
（解释：在可能的情况下应选择这样四种变换：
transform: translate(npx,npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;）
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /*move right for 20px*/
}6 响应式
Media Query不得单独编排，必须与相关的规则一起定义。
/*header styles*/
@media (...) {
/*header styles*/
}
/*main styles*/
@media (...) {
/*main styles*/
}
/*footer styles*/
@media (...) {
/*footer styles*/
}Media Query如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。
@media
(-webkit-min-device-pixel-ratio: 2), /*Webkit-based browsers*/
(min--moz-device-pixel-ratio: 2); /*Older Firefox browers(prior to Firefox 16)*/
(min-resolution: 2dpx), /*The standard way*/
(min-resolution: 192dpi) { /*dppx fallback*/
/*Retina-specific stuff here*/
}尽可能给出在高分辨率设备（Retina）下效果更佳的样式。
7 兼容性
7.1 属性前缀
带私有前缀的属性由长到短排列，按冒号位置对齐。
（解释：标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。）
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}7.2 Hack
需要添加hack时应尽可能考虑是否可以采用其他方式解决。
（解释：如果能通过合理的HTML结构或使用其他的CSS定义达到理想的样式，则不应该使用hack手段解决问题。通常hack会导致维护成本的增加。）
尽量使用选择器hack处理兼容性，而非属性hack。
（解释：尽量使用符合CSS语法的selector hack，可以避免一些第三方库无法识别hack语法的问题。）
/*IE 7*/
*:first-child + html #header {
margin-top: 3px;
padding: 5px;
}
/*IE 6*/
* html #header {
margin-top: 5px;
padding: 5px;
}尽量使用简单的属性hack。
.box {
_display: inline; /*fix double margin*/
float: left;
margin-left: 20px;
}
.container {
overflow: hidden;
*zoom: 1; /*triggering hasLayout*/
}7.3 Expression
禁止使用Expression。
参考博客：百度编码规范 点击打开链接 https://github.com/ecomfe/spec
版权声明：本文为博主原创文章，未经博主允许不得转载。