Google HTML/CSS代码风格指南

修正版本 2.1
原文：http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

每个风格点都有一个展开/收起按钮以便你可以得到更多的信息:▶. 你可以将全部展开或收起:

▶ 全部展开/全部收起
内容树
样式规则
协议
排版规则
缩进 大小写 行尾空格
元数据规则
编码 注释 活动的条目
HTML代码风格规则
文档类型 HTML有效性 语义 多媒体后备方案 关注点分离 实体引用 可选标签 type属性
HTML代码格式规则
格式
CSS代码风格规则
CSS代码有效性 ID和class的命名 ID和class命名风格 类型选择器 属性缩写 0和单位 0开头的小数 URI外的引号 十六进制 前缀 ID和class命名的定界符 Hacks
CSS代码格式规则
声明顺序 代码块内容缩进 声明完结 属性名完结 选择器和声明分行 规则分行
CSS元数据规则
注释部分

背景

本文档定义了HTML/CSS的编写格式和风格规则。它旨在提高合作和代码质量,并使其支持基础架构。适用于HTML/CSS文件，包括GSS文件。 只要代码质量是可以被维护的，就能很好的被工具混淆、压缩和合并。

样式规则

协议

原文 ▶
嵌入式资源书写省略协议头

排版规则

缩进

原文 ▶
每次缩进两个空格。

大小写

原文 ▶
只用小写字母。

行尾空格

原文 ▶
删除行尾白空格。

元数据规则

编码

原文 ▶
用不带BOM头的 UTF-8编码。

注释

原文 ▶
尽可能的去解释你写的代码。

活动的条目

原文 ▶
用 TODO 标记代办事项和正活动的条目

HTML代码风格规则

文档类型

原文 ▶
请使用HTML5标准。

HTML代码有效性

原文 ▶
尽量使用有效的HTML代码。

语义

原文 ▶
根据HTML各个元素的用途而去使用它们。

多媒体后备方案

原文 ▶
为多媒体提供备选内容。

关注点分离

原文 ▶
将表现和行为分开。

实体引用

原文 ▶
不要用实体引用。

可选标签

原文 ▶
省略可选标签（可选）。

type属性

原文 ▶
在样式表和脚本的标签中忽略 type 属性

HTML代码格式规则

格式

原文 ▶
每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。

CSS代码风格规则

CSS代码有效性

原文 ▶
尽量使用有效的CSS代码。

ID和class的命名

原文 ▶
为ID和class取通用且有意义的名字。

ID和class命名风格

原文 ▶
非必要的情况下，ID和class的名称应尽量简短。

类型选择器

原文 ▶
避免使用CSS类型选择器。

属性缩写

原文 ▶
写属性值的时候尽量使用缩写。

0和单位

原文 ▶
省略0后面的单位。

0开头的小数

原文 ▶
省略0开头小数点前面的0。

URI外的引号

原文 ▶
省略URI外的引号。

十六进制

原文 ▶
十六进制尽可能使用3个字符。

前缀

原文 ▶
选择器前面加上特殊应用标识的前缀（可选）。

ID和class命名的定界符

原文 ▶
ID和class名字有多单词组合的用短破折号“-”分开。

Hacks

原文 ▶
最好避免使用该死的CSS “hacks” —— 请先尝试使用其他的解决方法。

CSS代码格式规则

声明顺序

原文 ▶
依字母顺序进行声明。

代码块内容缩进

原文 ▶
缩进所有代码块（“{}”之间）内容。

声明完结

原文 ▶
所有声明都要用“;”结尾。

属性名完结

原文 ▶
在属性名冒号结束后加一个空字符。

选择器和声明分行

原文 ▶
将选择器和声明隔行。

规则分行

原文 ▶
每个规则独立一行。

CSS元数据规则

注释部分

原文 ▶
按组写注释。（可选）

吐槽部分

坚持一致原则

如果你要编辑代码，先花几分钟看看它的代码风格，如果它这么做，那你也应该这么做。

风格统一了，就有了一个共同思维的环境，参与者就可以专注的看你要说什么，而不是先想你是在说哪星球的语言。 虽然我们在这里提出统一样式规则，但就只是想让大家都知晓并借鉴而对自己的风格进行修正。 当然，保持自己独有的风格也是很重要的。balabala……

修正版本 2.1
译者：chajn - 新浪微博：@chajn