日期:2014-05-17  浏览次数:20910 次

谷歌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。)

?

注释

在需要的地方注释代码。

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

(此条要求可选,不被强制