谷歌HTML/CSS样式指南－－通用规则

原文地址

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Displaying_Hidden_Details_in_this_Guide#General_Style_Rules

个人整理翻译，禁止转载

协议

从URL所指向的图片或其他媒体文件、样式、脚本文件中省略协议部分(http:、https:)，除非相应的文件不属于这两种协议。

相对而言，省略协议可以解决URL混合内容的问题并能略微减小文件。

/* 不推荐 */

.example {

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

}

/* 推荐 */

.example {

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

}

缩进

一次缩进两个空格，不要使用Tab或混合使用Tab和空格。

<ul>

  <li>Fantastic

  <li>Great

</ul>

.example {

  color: blue;

}

大写问题

只使用小写。

所有代码必须用小写：包括元素名称，属性attributes，属性值（除非text/CDATA类型），选择器，属性properties和属性值（字符串除外）。

ps： 两个属性实在不会翻译，一个是xml规范定义的，应该指类如HTML里<input name=""/>的name属性；另一个是CSS里的类如 .class-selector{width: 100px;}的width属性。

<!--  不推荐  -->

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

<!-- 推荐 -->

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

 

尾随空白

删除尾随空格。

尾随空格是不必要的，只会使文件复杂。

<!-- 不推荐 -->

<p>What?_

<!--  推荐  -->

<p>Yes please.

 

编码

使用UTF-8（无BOM）。

请确保你的编辑器使用的字符编码​​为UTF-8，并且没有字节顺序标记。在HTML中通过<meta charset="utf-8">指定文件的编码。不要指定样式表的编码。（更多关于编码以及如何指定它们的问题参见 Character Sets & Encodings in XHTML, HTML and CSS。）

 

注释

在需要的地方注释代码。

用注释说明你的代码：代码包含了什么？目的是什么？为什么用多种解决方案，哪个又是首选？

（此条要求可选，不被强制要求。依据项目的复杂程度不同，HTML和CSS的里程碑控制非常麻烦。）

 

任务列表

用TODO标记待做任务列表。

用关键字TODO来高亮待做列表，而不用其他常见格式，如@@

用“TODO(联系人)”的方式，在括号中增加联系人或邮件地址，在冒号后面增加任务说明。

 

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

<center>Test</center>

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

<ul>

  <li>Apples</li>

  <li>Oranges</li>

</ul>

 

 

To be continue....