[转载]google的html/css规范指南

[转载]google的html/css规范指南 – html5salon – 博客园.

google之前出了JavaScript规范指南,中文翻译传送门在此,现在有了html/css规范指南,明河开始翻译时版本是2.1。后续如果google有新的内容补充,明河也会跟进。

常规样式规则

协议

引入的assets资源文件(js、css、图片文件)忽略协议http:, https:),比如:
不推荐的写法:

推荐的写法:

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

不推荐的写法:

.example {
}

推荐的写法:

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

关于google的这点建议,明河倒是觉得有待商榷,有兴趣的朋友看http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just,里面有详细的讨论,根据一位网友的测试,相对url在IE7、IE8下存在二次加载的问题。

常规格式规则

缩进

使用二个空格缩进(PS:明河一般使用四个空格缩进-_-!)

  1. <ul>
  2.   <li>Fantastic</li>
  3.   <li>Great</li>
  4. </ul>
.example {
  color: blue;
}
大写

只使用小写。
所有的代码只使用小写字母(PS:淘宝的做法是如果跟js的DOM操作相关,作为钩子使用J_Trigger类似的方式):包括元素名称、样式名、属性名(除了text/CDATA)。
不推荐的写法:

  1. <A HREF=/>Home</A>

推荐的写法:

<img src="google.png" alt="Google">
尾部空白

删掉冗余的行尾空格。
不推荐的写法:

What?_

推荐的写法:

Yes please.

常规Meta规则

编码

使用utf-8编码。
指定页面的文档编码为utf-8

<meta charset="utf-8">

不需要特别指定样式引用的编码为utf-8。
(ps:关于html编码指定方面的内容,可以看《 Character Sets & Encodings in XHTML, HTML and CSS》

注释

如果可能,注释还是必不可少的。
使用注释说明下代码:它包括了什么,它的目的是什么,为什么优先使用它。

行动项目

(ps:推荐使用)
google建议养成写TODO的习惯,特别是在项目中,记录下一些要改,但来不及修改的地方,或指派其他同事做修改。
高亮TODO,不同的编辑器有不一样的方式,比如idea是TODO:。

{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>

常规html设计规则

文档类型

使用html5文档声明:

  1. <!DOCTYPE html>

不再使用XHTML( application/xhtml+xml)。

HTML 的正确性

可以使用一些工具,检验你html的正确性,比如 W3C HTML validator
不推荐的写法:

<article>This is only a test.
</article>

推荐的写法:

  1. <!DOCTYPE html>
  2. <meta charset=utf-8>
  3. <title>Test</title>
  4. <article>This is only a test.</article>
HTML 的语义性

使用富含语义性的标签(ps:建议掌握html5新增的部分语义标签)。
google特别指出了要确保html的可用性,看下面的代码
不推荐的写法:

<div onclick="goToRecommendations();">All recommendations</div>

推荐的写法:

<a href="recommendations/">All recommendations</a>
多媒体元素降级处理

给多媒体元素,比如canvas、videos、 images增加alt属性,提高可用性(特别是常用的img标签,尽可量得加上alt属性,提供图片的描述信息)。
不推荐的写法:

<img src="spreadsheet.png">

推荐的写法:

<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
html、css、JavaScript三层分离

尽可能保持结构(html结构标签)、描述(css)、行为(JavaScript)的分离,并且让他们尽可能少的交互。确保html文档内容只有html的结构,将css和javascript以资源的方式引入。
不推荐的写法:

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

推荐的写法:

  1. <!DOCTYPE html>
  2. <title>My first CSS-only redesign</title>
  3. <link rel=stylesheet href=default.css>
  4. <h1>My first CSS-only redesign</h1>
  5. <p>I’ve read about this on a few sites but today I’m actually
  6.   doing it: separating concerns and avoiding anything in the HTML of
  7.   my website that is presentational.
  8. <p>It’s awesome!
实体引用

在html页面中避免使用实体引用。
如果你的文件是utf-8编码,就不需要使用像 —, or 的实体引用。
不推荐的写法:

The currency symbol for the Euro is “&eur;”.

推荐的写法:

The currency symbol for the Euro is “€”.
可选的标签

忽略一些可选的标签,比如
不推荐的写法:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Spending money, spending bytes</title>
  5.   </head>
  6.   <body>
  7.     <p>Sic.</p>
  8.   </body>
  9. </html>

推荐的写法:

  1. <!DOCTYPE html>
  2. <title>Saving money, saving bytes</title>
  3. <p>Qed.

html5的文档,可以忽略head、body标签。
所有可忽略的标签,可以看《 HTML5 specification 》

type属性

样式和脚本引用可以忽略type属性。
不推荐的写法:

<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

推荐的写法:

<link rel="stylesheet" href="//www.google.com/css/maia.css">

不推荐的写法:

<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

推荐的写法:

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

html格式规则

常规格式

每一块、每一列表、每一表格元素都需要另起一行,并缩进每个子元素。

  1. <blockquote>
  2.   <p><em>Space</em>, the final frontier.</p>
  3. </blockquote>
  1. <ul>
  2.   <li>Moe
  3.   <li>Larry
  4.   <li>Curly
  5. </ul>
  1. <table>
  2.   <thead>
  3.     <tr>
  4.       <th scope=col>Income</th>
  5.       <th scope=col>Taxes</th>
  6.   <tbody>
  7.     <tr>
  8.       <td>$ 5.00</td>
  9.       <td>$ 4.50</td>
  10. </table>

css样式规则

css验证

尽可能验证css的合法性,可以使用 W3C CSS validator

id和class名

使用富有含义和通用的id和class名。
(ps:明河经常听周围的同事感慨,取好名字,也是个学问,有时候有些命名会让你很纠结,但好的命名的确可以提高可读性和可维护性。)
使用功能性和通用性的命名方式减少文档或模板的不必要的改动。
不推荐的写法:

/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
.clear {}

推荐的写法:

/* Recommended: specific */
#gallery {}
#login {}
.video {}
/* Recommended: generic */
.aux {}
.alt {}
id和class的命名风格

id和class的命名在保持语义性的同时尽可能的短。
不推荐的写法:

#navigation {}
.atr {}

推荐的写法:

#nav {}
.author {}

可以缩写单词,但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。

选择器

避免出现多余的祖先选择器。(存在性能上的差异问题,可以看 performance reasons
避免出现元素标签名作为选择器的一部分。
不推荐的写法:

ul#example {}
div.error {}

推荐的写法:

#example {}
.error {}
简化css属性写法

不推荐的写法:

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时,忽略单位。

margin: 0;
padding: 0;
属性值出现小数点忽略0
font-size: .8em;
url的引用

使用url()时忽略刮号中的””。

@import url(//www.google.com/css/go.css);
16进制符号

不推荐的写法:

color: #eebbcc;

推荐的写法:

color: #ebc;
前缀

给选择器样式名增加前缀(可选)。
在大的项目(多人协作)中使用前缀可以减少样式冲突,同时可以明确选择器归属含义。

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

(PS:一般明河使用前缀来定位样式的归属,比如.nav-item,表明是nav导航下的子元素样式。)

id和class名的分隔符

单词使用“-”来连接。
不推荐的写法:

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}

推荐的写法:

#video-id {}
.ads-sample {}
Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
(ps:明河觉得这个很难,毕竟IE横在那里。)
尽量避免使用CSS filters。

css格式规则

css属性按字母顺序书写

(PS:排序忽略浏览器前缀,比如-moz-,-webkit-)

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
块内容缩进
@media screen, projection {
  html {
    background: #fff;
    color: #444;
  }
}

缩进所有的块状内容

不可缺少的;

不推荐的写法:

.test {
  display: block;
  height: 100px
}

推荐的写法:

.test {
  display: block;
  height: 100px;
}
属性值前增加个空格

不推荐的写法:

h3 {
  font-weight:bold;
}

推荐的写法:

h3 {
  font-weight: bold;
}
分隔选择器

不推荐的写法:

a:focus, a:active {
  position: relative; top: 1px;
}

推荐的写法:

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
1行只有一个css属性,二个规则间有一个空行
html {
  background: #fff;
}
body {
  margin: auto;
  width: 50%;
}
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏