CSS规范

通用风格规范

协议

在嵌入资源时，省略图片、样式表、脚本等嵌入式资源的协议名（http:，https:），除非要加载的资源文件不属于上述两种协议。省略协议名，使用相对路径可以防止内容混淆问题导致的文件重复下载。 HTML案例：

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

CSS案例：

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

通用格式规范

缩进

在 HTML、CSS 中统一使用Tab进行缩进（html和body不需要缩进）。
1个Tab统一设置为4个空格宽。
大小写

所有 HTML、CSS 代码均使用小写字母（除字符串文本、CDATA 外），包括元素名、属性、选择器。

行尾空格

代码行尾不要出现空格，容易误导代码比较工具。

通用元数据规范

注释

根据需要只进行必要的注释，过多的注释会增大文档体积。

活动条目

使用 TODO 标记活动的条目和代办条目。使用 TODO(name) 的方式指定条目负责人。

<!-- TODO(Hiufan): add a nav bar -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML 风格规范

基本风格

文件应以<!DOCTYPE ......>首行顶格开始，推荐使用 HTML5 标准，在 HTML 头部指定 <!DOCTYPE html>。
使用 HTML(text/html) 文本格式，不要使用 XHTML(application/xhtml+xml)，对于空标签不要闭合，用 <br> 代替<br />。
必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码
根据页面内容和需求填写适当的keywords和description。
页面title是极为重要的不可缺少的一项。
结构顺序与视觉顺序
结构顺序与视觉顺序基本保持一致。
按照从上至下、从左到右的视觉顺序书写HTML结构。
用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。
table不建议用于布局，但表现具有明显表格形式的数据，table还是首先。
保持清晰简洁的树形结构
每一个块级元素都另起一行，每一行都使用Tab缩进对齐。
对于内容较为简单的表格，建议将tr写成单行。对于内容较为简单的列表，建议将li写成单行。
大的模块之间用空行隔开，使模块更清晰。
结构上如果可以并列书写，就不要嵌套。如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>。
一个标签上引用的className不要过多，越少越好。比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>
对于一个语义化的内部标签，应尽量避免使用className。比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
语义化（需要再详细些）

根据各 HTML 元素（有时被错误称为标签）的用途去使用它们，比如使用 h1~h6 元素去构造标题，使用 p 元素构造段落，使用 a 元素构造锚点等。

根据 HTML 元素的用途去使用非常重要，它涉及到文档的可访问性、重用性和代码效率等问题。

HTML有效性

编写有效的HTML代码。可以使用类似这样的工具 W3C HTML validator 来进行测试。

<!-- Not recommended -->
<title>Test</title>
<article>This is only a test.

<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

多媒体备选方案

为多媒体如图像、视频、通过 Canvas 绘制的元素提供备选方案。对图像使用有意义的备选文案（alt），对视频、音频使用有效的副本和文案说明。

对于界面装饰、纹理类的图片也必须写明 alt 标签，内容可留空，如alt=""。

<!-- Not recommended -->
<img src="wholeroute.jpg">

<!-- Recommended -->
<img src="wholeroute.jpg" alt="全程线路图">

分离代码

注意分离不同性质代码，将表现和行为分开。

严格保持结构（HTML）、表现（CSS）、行为（JS）分离，尽量减少三者间的耦合，确保文档和模板只包含 HTML 结构，将样式放入样式表，行为放入脚本中。

使用link将css文件引入，并置于head中。
使用script将js文件引入，并置于body底部。
尽量避免内联。
实体引用

不要进行实体引用。

当团队使用统一的编码（UTF-8）进行开发时，不要使用类似 —、”、☺ 等实体的引用。

在 HTML 文档中具有特殊含义的字符（例如 <、&、连续的空格）例外。

<!-- Not recommended -->
欧元的货币符号是 &ldquo;&eur;&rdquo;。

<!-- Recommended -->
欧元的货币符号是 “€”。

type 属性

在样式表和脚本标签中省略 type 属性，HTML5 默认 type 为 text/css 和 text/javascript，即便是老浏览器也支持，无需指定。

<!-- Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/media.css" type="text/css">
<!-- Recommended -->
<link rel="stylesheet" href="//www.google.com/css/media.css">

<!-- Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

常用标签

标签	语义	嵌套常见错误	常用属性
`<a></a>`	超链接/锚	`a`不可嵌套`a`	`href,name,title,rel,target`
`<br />`	换行
`<button></button>`	按钮	不可嵌套表单元素	`type,disabled`
`<dd></dd>`	定义列表中的定义（描述内容）	只能以`dl`为父容器，对应一个`dt`
`<del></del>`	文本删除
`<div></div>`	块级容器
`<dl></dl>`	定义列表	只能嵌套`dt`和`dd`
`<dt></dt>`	定义列表中的定义术语	只能以`dl`为父容器，对应多个`dd`
`<em></em>`	强调文本
`<form></form>`	表单	`action,target,method,name`
`<h1></h1>'\|标题\|从`h1`到`h6`，不可嵌套块级元素
`<iframe></iframe>`	内嵌一个网页	`frameborder,width,height,src,scrolling,name`
`<img />`	图像	`alt,src,width,height`
`<input />`	各种表单控件	`type,name,value,checked,disabled,maxlength,readonly,accesskey`
`<label></label>`	标签为`input`元素定义标注	`for`
`<li></li>`	列表项	只能以`ul`或`ol`为父容器
`<link />`	引用样式或`icon`	不可嵌套任何元素	`type,rel,href`
`<meta />`	文档信息	只用于`head`	`content,http-equiv,name`
`<ol></ol>`	有序列表	只能嵌套`li`
`<option></option>`	`select`中的一个选项	仅用于`select`	`value,selected,disabled`
`<p></p>`	段落	不能嵌套块级元素
`<script></script>`	引用脚本	不可嵌套任何元素	`type,src`
`<select></select>`	列表框或下拉框	只能嵌套`option`或`optgroup`	`name,disabled,multiple`
`<span></span>`	内联容器
`<strong></strong>`	强调文本
`<style></style>`	引用样式	不可嵌套任何元素	`type,media`
`<sub></sub>`	下标
`<sup></sup>`	上标
`<table></table>`	表格	只可嵌套表格元素	`width,align,background,cellpadding,cellspacing,summary,border`
`<tbody></tbody>`	表格主体	只用于`table`
`<td></td>`	表格中的单元格	只用于`tr`	`colspan,rowspan`
`<textarea></textarea>`	多行文本输入控件	`name,accesskey,disabled,readonly,rows,cols`
`<tfoot></tfoot>`	表格表尾	只用于`table`
`<th></th>`	表格中的标题单元格	只用于`tr`	`colspan,rowspan`
`<thead></thead>`	表格表头	只用于`table`
`<title></title>`	文档标题	只用于`head`
`<tr></tr>`	表格行	嵌套于`table`或`thead、tbody、tfoot`
`<ul></ul>`	无序列表	只能嵌套li

废弃的标签

basefont、big、center、font、s、strike、tt、u、frame、frameset、noframes、acronym、applet、dir。

HTML格式规范

一般格式

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。缩进准确到位，力求在sublime中可以正常地折叠代码。

如果需要处理列表元素间空格问题，可以将列表元素放在一行内。

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

引号

HTML 元素的属性值字符串使用双引号，不要使用单引号，除非属性值中含有大量双引号（几乎不可能），少量双引号可用实体 " 代替。

<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS 风格规范

ID 和 class 命名

ID、class 使用小写字母命名，可以用减号作为分隔符，不要使用下划线。

尽量使用有意义的命名方式，足够长但尽可能短。

/* Not recommended */
#gPos_ab {}
/* Recommended */
#button-green {}
.clear {}

/* Not recommended */
#navigation {}
#atr {}
/* Recommended */
#nav {}
#author {}

建议对复杂的项目在命名中增加命名空间前缀。

#main-note {}
#detail-note {}

类型选择器

不要在 ID 或 class 选择器前加不必要的元素名称，不必要的选择器对于性能有损耗。

/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}

属性简写

尽可能使用属性的简写。

/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 值和单位

当属性值为 0 时，省略它后面的单位。

margin: 0;
padding: 0;

以 0 开始的小数

以 0 开始的小数书写时省略 0。

font-size: .8em;

十六进制颜色值

当可以使用 3 位的颜色值时，不要使用 6 位的。

/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;

CSS 格式规范

属性

要求每个属性独占一行。

.box {
  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-indent: 2em;
}

缩进与空格

代码块内采用两个空格的缩进，不要使用制表符。

属性名后面的冒号与属性值之间要有一个空格。

不要使用下面的写法进行对齐。

/* Not recommended */
.box {
  background:            fuchsia;
  border:                1px solid;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;
  color:                 black;
  text-align:            center;
  text-indent:           2em;
}

分号

每条属性后都要加分号，不要省略每个代码块最后一条的分号。

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

引号

省略 URI 外面的引号，对于属性值中包含空格的字符串，使用单引号扩起。

/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);
html {
  font-family: 'open sans', arial, sans-serif;
}

CSS 元数据规范

区块注释

尽可能对样式进行分组，并增加注释。

/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}

参考：http://www.zhihu.com/question/19960028 http://bigc.at/tabs-vs-spaces.orz http://www.uisdc.com/css-written-specifications

Hiufan / blog

CSS规范 #1