Google HTML/CSS代码风格指南(中文版)
2012-05-06 21:59:42   来源:csdn.net   评论:0 点击:

本文档定义了HTML/CSS的编写格式和风格规则。它旨在提高合作和代码质量,并使其支持基础架构。适用于HTML/CSS文件,包括GSS文件

Google HTML/CSS代码风格指南

修正版本 2.1

背景

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

样式规则

 

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

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: https: )。如果不是这两个声明的URL则不省略。

省略协议声明,使URL成相对地址,防止内容混淆问题和导致小文件重复下载。

<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//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);
}

排版规则

 

每次缩进两个空格。

不要用TAB键或多个空格来进行缩进。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

 

只用小写字母。

所有的代码都用小写字母:适用于元素名,属性,属性值(除了文本和 CDATA ), 选择器,特性,特性值(除了字符串)。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">

 

删除行尾白空格。

行尾空格没必要存在。

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

元数据规则

 

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

让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。

在HTML模板和文件中指定编码 <meta charset="utf-8"> . 不需要制定样式表的编码,它默认为UTF-8.

(更多有关于编码的信息和怎样指定它,请查看 Character Sets & Encodings in XHTML, HTML and CSS。)

 

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

用注释来解释代码:它包括什么,它的目的是什么,它能做什么,为什么使用这个解决方案,还是说只是因为偏爱如此呢?

(本规则可选,没必要每份代码都描述的很充分,它会增重HTML和CSS的代码。这取决于该项目的复杂程度。)

 

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

只用 TODO 来强调代办事项, 不要用其他的常见格式,例如 @@ 

附加联系人(用户名或电子邮件列表),用括号括起来,例如 TODO(contact) 

可在冒号之后附加活动条目说明等,例如 TODO: 活动条目说明 

{# TODO(cha.jn): 重新置中 #}
<center>Test</center>
<!-- TODO: 删除可选元素 -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML代码风格规则

 

请使用HTML5标准。

HTML5是目前所有HTML文档类型中的首选: <!DOCTYPE html> .

(推荐用HTML文本文档格式,即 text/html . 不要用 XHTML。 XHTML格式,即 application/xhtml+xml , 有俩浏览器完全不支持,还比HTML用更多的存储空间。)

相关热词搜索:Google HTML 代码

上一篇:第一页
下一篇: 让设计更上一层楼:推荐5个优秀的设计理念

分享到: 收藏
评论排行