google提供的的html/css规范指南

悟静 2012-12-04

展开全文

google之前出了javascript规范指南，中文翻译传送门在此，现在有了html/css规范指南，明河开始翻译时版本是2.1。后续如果google有新的内容补充，明河也会跟进。

常规样式规则

协议

引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：
不推荐的写法：

<scriptsrc="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

推荐的写法：

<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"></script>

不推荐的写法：

.example {

background: url(http://www.google.com/images/example);

}

推荐的写法：

.example {

background: url(//www.google.com/images/example);

}

关于google的这点建议，明河倒是觉得有待商榷，有兴趣的朋友看http:///questions/4831741/can-i-change-all-my-http-links-to-just，里面有详细的讨论，根据一位网友的测试，相对url在IE7、IE8下存在二次加载的问题。

常规格式规则

缩进

使用二个空格缩进（PS：明河一般使用四个空格缩进-_-!）

1
<ul> 

2
  <li>Fantastic</li> 

3
  <li>Great</li> 

4
</ul>

1
.example { 

2
  color: blue; 

3
}

大写

只使用小写。
所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。
不推荐的写法：

1
<A HREF="/">Home</A>

推荐的写法：

1
<img src="google.png"alt="Google">

尾部空白

删掉冗余的行尾空格。
不推荐的写法：

What?_

推荐的写法：

Yes please.

常规Meta规则

编码

使用utf-8编码。
指定页面的文档编码为utf-8

<metacharset="utf-8">

不需要特别指定样式引用的编码为utf-8。
（ps：关于html编码指定方面的内容，可以看《 Character Sets & Encodings in XHTML, HTML and CSS》）

注释

如果可能，注释还是必不可少的。
使用注释说明下代码：它包括了什么，它的目的是什么，为什么优先使用它。

行动项目

（ps：推荐使用）
google建议养成写TODO的习惯，特别是在项目中，记录下一些要改，但来不及修改的地方，或指派其他同事做修改。
高亮TODO，不同的编辑器有不一样的方式，比如idea是TODO:

1
{# TODO(john.doe): revisit centering #} 

2
<center>Test</center>

1
<!-- TODO: remove optional tags -->

2
<ul> 

3
<li>Apples</li> 

4
<li>Oranges</li> 

5
</ul>

常规html设计规则

文档类型

使用html5文档声明：

1
<!DOCTYPE html>

不再使用XHTML（ application/xhtml+xml）。

HTML 的正确性

可以使用一些工具，检验你html的正确性，比如 W3C HTML validator。
不推荐的写法：

1
<article>This is only a test. 

2
</article>

推荐的写法：

1
<!DOCTYPE html> 

2
<meta charset="utf-8"> 

3
<title>Test</title> 

4
<article>This is only a test.</article>

HTML 的语义性

使用富含语义性的标签（ps:建议掌握html5新增的部分语义标签）。
google特别指出了要确保html的可用性，看下面的代码
不推荐的写法：

<divonclick="goToRecommendations();">All recommendations</div>

推荐的写法：

1
<ahref="recommendations/">All recommendations</a>

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。
不推荐的写法：

推荐的写法：

1
<img src="spreadsheet.png"alt="Spreadsheet screenshot.">

html、css、javascript三层分离

尽可能保持结构（html结构标签）、描述（css）、行为（javascript）的分离，并且让他们尽可能少的交互。确保html文档内容只有html的结构，将css和javascript以资源的方式引入。
不推荐的写法：

01
<!DOCTYPE html> 

02
<title>HTML sucks</title> 

03
<link rel="stylesheet" href="base.css" media="screen"> 

04
<link rel="stylesheet" href="grid.css" media="screen"> 

05
<link rel="stylesheet" href="print.css" media="print"> 

06
<h1 style="font-size: 1em;">HTML sucks</h1> 

07
<p>I’ve read about this on a few sites but now I’m sure: 

08
  <u>HTML is stupid!!1</u> 

09
<center>I can’t believe there’s no way to control the styling of 

10
  my website without doing everything all over again!</center>

推荐的写法：

1
<!DOCTYPE html> 

2
<title>My first CSS-only redesign</title> 

3
<link rel="stylesheet" href="default.css"> 

4
<h1>My first CSS-only redesign</h1> 

5
<p>I’ve read about this on a few sites but today I’m actually 

6
  doing it: separating concerns and avoiding anything in the HTML of 

7
  my website that is presentational. 

8
<p>It’s awesome!

实体引用

在html页面中避免使用实体引用。
如果你的文件是utf-8编码，就不需要使用像 —, ”, or ?的实体引用。
不推荐的写法：

The currency symbol for the Euro is “&eur;”.

推荐的写法：

The currency symbol for the Euro is “€”.

可选的标签

忽略一些可选的标签，比如
不推荐的写法：

1
<!DOCTYPE html> 

2
<html> 

3
  <head> 

4
    <title>Spending money, spending bytes</title> 

5
  </head> 

6
  <body> 

7
    <p>Sic.</p> 

8
  </body> 

9
</html>

推荐的写法：

1
<!DOCTYPE html> 

2
<title>Saving money, saving bytes</title> 

3
<p>Qed.

html5的文档，可以忽略head、body标签。
所有可忽略的标签，可以看《 HTML5 specification 》，

type属性

样式和脚本引用可以忽略type属性。
不推荐的写法：

1
<link rel="stylesheet"href="//www.google.com/css/maia.css"type="text/css">

推荐的写法：

1
<link rel="stylesheet"href="//www.google.com/css/maia.css">

不推荐的写法：

1
<script src="//www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>

推荐的写法：

1
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

html格式规则

常规格式

每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。

01
<blockquote> 

02
  <p><em>Space</em>, the final frontier.</p> 

03
</blockquote> 

04
<ul> 

05
  <li>Moe 

06
  <li>Larry 

07
  <li>Curly 

08
</ul> 

09
<table> 

10
  <thead> 

11
    <tr> 

12
      <th scope="col">Income</th> 

13
      <th scope="col">Taxes</th> 

14
  <tbody> 

15
    <tr> 

16
      <td>$ 5.00</td> 

17
      <td>$ 4.50</td> 

18
</table>

css样式规则

css验证

尽可能验证css的合法性，可以使用 W3C CSS validator。

id和class名

使用富有含义和通用的id和class名。
(ps：明河经常听周围的同事感慨，取好名字，也是个学问，有时候有些命名会让你很纠结，但好的命名的确可以提高可读性和可维护性。)
使用功能性和通用性的命名方式减少文档或模板的不必要的改动。
不推荐的写法：

1
/* Not recommended: meaningless */

2
#yee-1901{} 

3
    
4
/* Not recommended: presentational */

5
.button-green{} 

6
.clear {}

推荐的写法：

1
/* Recommended: specific */

2
#gallery {} 

3
#login {} 

4
.video {} 

5
    
6
/* Recommended: generic */

7
.aux {} 

8
.alt {}

id和class的命名风格

id和class的命名在保持语义性的同时尽可能的短。
不推荐的写法：

1
#navigation {} 

2
.atr {}

推荐的写法：

1
#nav {} 

2
.author {}

可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。

选择器

避免出现多余的祖先选择器。（存在性能上的差异问题，可以看 performance reasons）
避免出现元素标签名作为选择器的一部分。
不推荐的写法：

1
ul#example {} 

2
div.error {}

推荐的写法：

1
#example {} 

2
.error {}

简化css属性写法

不推荐的写法：

1
border-top-style: none; 

2
font-family: palatino, georgia, serif; 

3
font-size: 100%; 

4
line-height: 1.6; 

5
padding-bottom: 2em; 

6
padding-left: 1em; 

7
padding-right: 1em; 

8
padding-top: 0;

推荐的写法：

1
border-top: 0; 

2
font: 100%/1.6palatino, georgia, serif; 

3
padding: 01em2em;

使用简洁的属性写法有利于提高可读性和解析效率。

0和单位

属性值为0时，忽略单位。

1
margin: 0; 

2
padding: 0;

属性值出现小数点忽略0

1
font-size: .8em;

url的引用

使用url()时忽略刮号中的”"。

1
@import url(//www.google.com/css/go.css);

16进制符号

不推荐的写法：

1
color: #eebbcc;

推荐的写法：

1
color: #ebc;

前缀

给选择器样式名增加前缀（可选）。
在大的项目（多人协作）中使用前缀可以减少样式冲突，同时可以明确选择器归属含义。

1
.adw-help{} /* AdWords */

2
#maia-note {} /* Maia */

（PS:一般明河使用前缀来定位样式的归属，比如.nav-item，表明是nav导航下的子元素样式。）

id和class名的分隔符

单词使用“-”来连接。
不推荐的写法：

1
/* Not recommended: does not separate the words “demo” and “image” */

2
.demoimage {} 

3
    
4
/* Not recommended: uses underscore instead of hyphen */

5
.error_status {}

推荐的写法：

1
#video-id {} 

2
.ads-sample {}

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
（ps：明河觉得这个很难，毕竟IE横在那里。）
尽量避免使用CSS filters。

css格式规则

css属性按字母顺序书写

（PS：排序忽略浏览器前缀，比如-moz-，-webkit-）

1
background: fuchsia; 

2
border: 1pxsolid; 

3
-moz-border-radius: 4px; 

4
-webkit-border-radius: 4px; 

5
border-radius: 4px; 

6
color: black; 

7
text-align: center; 

8
text-indent: 2em;

块内容缩进

1
@media screen, projection{ 

2
    
3
  html { 

4
    background: #fff; 

5
    color: #444; 

6
  } 

7
    
8
}

缩进所有的块状内容。

不可缺少的;

不推荐的写法：

1
.test { 

2
  display: block; 

3
  height: 100px

4
}

推荐的写法：

1
.test { 

2
  display: block; 

3
  height: 100px; 

4
}

属性值前增加个空格

不推荐的写法：

1
h3{ 

2
  font-weight:bold; 

3
}

推荐的写法：

1
h3{ 

2
  font-weight: bold; 

3
}

分隔选择器

不推荐的写法：

1
a:focus, a:active { 

2
  position: relative; top: 1px; 

3
}

推荐的写法：

1
h1, 

2
h2, 

3
h3{ 

4
  font-weight: normal; 

5
  line-height: 1.2; 

6
}

1行只有一个css属性，二个规则间有一个空行

1
html { 

2
  background: #fff; 

3
} 

4
    
5
body { 

6
  margin: auto; 

7
  width: 50%; 

8
}