google代码风格指南

本文翻译自Google HTML/CSS Style Guide

通用风格规则

协议

嵌入资源时省略协议。嵌入的图像或其他媒体资源、样式表、脚本的url地址是“http:”、“https:”可省略协议部分。可使URL变成相对地址，避免混合内容问题并略微减少文件大小。

1
<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(http://www.google.com/images/example);
}
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(//www.google.com/images/example);
}

通用格式话规则

缩进

使用2个空格缩进。不要使用tab或tab混合空格。

大小写

只使用小写。所有代码使用小写，包括HTML标签、属性、属性值（不包括text/CDATA）、CSS选择器、CSS属性、CSS属性值。当然字符串仍可以使用大写。

1
<!-- 不推荐 -->
<A HREF="/">Home</A>
color: #E5E5E5;
<!-- 推荐 -->
<img src="google.png" alt="Google">
color: #e5e5e5;

末尾空格

移除所有末尾空格。它们是不必要并可能带来麻烦。

1
<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

通用元数据规则

编码

使用“UTF-8(No BOM)”。在HTML文件中通过<meta charset="utf-8">来指定编码，样式表文件默认为UTF-8因而不需要指定。（更多编码信息参考Handling character encodings in HTML and CSS

【注：“NO BOM”即文件开头无字节顺序（大头、小头）标记，延伸阅读字符编码笔记：ASCII，Unicode和UTF-8】

注释

在必要的地方添加注释。视项目复杂度而定，因为过多注释会导致HTML、CSS文件过于臃肿。

执行项目

使用TODO标记todos和执行项目。在括号内添加联系方式，格式为TODO(contact)，在冒号后添加执行项目，格式为TODO: action item。

1
{# TODO(john.doe): revisit centering #}
<center>Test</center>

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML风格规则

文档格式

使用HTML文档格式，<!DOCTYPE html>。不要使用XHTML，不要关闭空元素，如<br>而不是<br />。

HTML合规性

尽可能使用合法的HTML代码。除非是为了缩小文件大小，但保证HTML有效性是底线。使用工具校验HTML，如：W3C HTML validator 。

语义化

根据用途使用合适HTML元素。如标题使用h1~h6，段落用p，链接用a等。这很重要，涉及到可访问性、重用以及代码效率的问题。

1
<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

多媒体替代文本

给多媒体提供替代文本。对于图片、音频、视频、画布，确保提供替代文本，如对图片使用有意义的alt属性值。这很重要，让那些使用屏幕阅读器的盲人用户也能更好地浏览网页。如果图片过多造成负担，或者图片只是在样式渲染之前起一个临时作用，那么可以写成alt=""。

1
<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

结构分离

结构、表现、行为分离。严格分离结构（标记）、表现（样式）和行为（脚本），并确保这三者的交互最小化。也就是说HTML文档和模板只包含HTML结构性内容，将表现性的东西放进样式表文件，将行为性的东西放进脚本文件。另也要尽量减少外部样式表和脚本文件的数量。这点对维护很重要，一般上维护样式表或脚本文件比维护HTML文档更容易。

1
<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

<!-- 推荐 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

实体引用

不要使用—，”，☺等实体引用，当然前提是要保证团队内的编码格式统一。可以使用实体的情况有下面几种：对于在HTML中具有特殊意义的字符（如<和&），控制字符，和不可见的字符如 （no-break space）。

1
<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.

可选标签（本规则可选）

省略可选标签。出于减小文件体积等目的，HTML5规范规定了一些可以省略的标签。（这一点可能需要更多的时间去适应，因为目前的众多开发者都还不习惯这么做。但是出于一致性和简洁性的原因，把可选标签全都省略掉是最好的做法。）

type属性

省略样式表和脚本的type属性，除非不是CSS和Javascript。因为HTML5中text/css和text/javascript为默认。

1
<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTML格式化规则

通用格式化

每一块、列表、表格另起新行，其子元素使用缩进。如果不想让列表项之间出现空文本节点，可以把所有的li放在一行。

1
<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

HTML引号

HTML属性值一律使用双引号。

1
<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS风格规则

CSS样式合规性

使用合法的css，除非使用浏览器的私有属性。用W3C CSS validator校验css样式文件。

ID和class命名

使用有意义或通用的ID和class。使用能表达元素功能或通用的，且最容易理解不易改变的命名，而不是表现层或具有隐喻的命名。使用结构化的命名以减少不必要的文档更新。

1
/* 不推荐: meaningless */
#yee-1901 {}

/* 不推荐: presentational */
.button-green {}
.clear {}

/* 推荐: specific */
#gallery {}
#login {}
.video {}

/* 推荐: generic */
.aux {}
.alt {}

ID和class命名风格

使用简洁明了的命名。这样有助于代码可读性和代码效率。

1
/* 不推荐 */
#navigation {}
.atr {}

/* 推荐 */
#nav {}
.author {}

类型选择器

不要在ID和class前加元素，除非有必要。

1
/* 不推荐 */
ul#example {}
div.error {}

/* 推荐 */
#example {}
.error {}

属性缩写

尽可能使用属性缩写。CSS提供了许多缩写的属性，如font，即使只设置一个属性值。这有助于代码可读性和代码效率。

1
/* 不推荐 */
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;

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0单位

省略单位若值为0。

1
margin: 0;
padding: 0;

0开头

省略0若值以0开头。

1
font-size: .8em;

Hex 颜色值

可缩写的16进制颜色使用3个字符。这样更简洁。

1
/* 不推荐 */
color: #eebbcc;

/* 推荐 */
color: #ebc;

前缀（本规则可选）

给选择器加上应用特有的前缀。在大的项目中可避免命名冲突。

1
.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID和class分隔符

使用连词符分隔ID和class。不要使用除了连词符外任何字符作为分隔符。

1
/* 不推荐: 没有分隔 “demo” 和 “image” */
.demoimage {}

/* 不推荐: 使用了下划线分隔 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

CSS hacks

不要首选UA探测和CSS hacks。基于代码效率和可维护性的考虑，UA探测和hacks应最后的手段考虑。

CSS格式化规则

声明顺序

按字母书序声明。方便维护，排列时可以不考虑私有属性前缀，但-moz应当排在-webkit前。

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

代码块缩进

所有代码块都缩进。结构清晰，可读性高。

1
@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

声明结束

每条声明使用分号结束。保持声明一致性和可扩展性。

1
/* 不推荐 */
.test {
  display: block;
  height: 100px
}

/* 推荐 */
.test {
  display: block;
  height: 100px;
}

属性名结尾

在属性名冒号后加一个空格。属性名和冒号间没有空格。

1
/* 不推荐 */
h3 {
  font-weight:bold;
}

/* 推荐 */
h3 {
  font-weight: bold;
}

声明块分隔

在最后一个选择器和声明块加一个空格。在最后一个选择器和左大括号间加一个空格，且在同一行。

1
/* 不推荐: 缺少空格 */
#video{
  margin-top: 1em;
}

/* 不推荐: 不必要的换行 */
#video
{
  margin-top: 1em;
}

/* 推荐 */
#video {
  margin-top: 1em;
}

选择器和声明分隔

每个选择器和声明都使用新行。

1
/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分隔

规则间用空行分隔。

1
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSS引号

属性选择器和属性值使用单引号。url值不适用引号，使用charset时用双引号。

1
/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

/* 推荐 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

CSS元规则（本规则可选）

使用注释为样式分组。组间用空行分隔。

1
/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

扩展阅读