google的html/css规范指南

zoukankan html css js c++ java

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

常规样式规则

协议

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

<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);

}

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

常规格式规则

缩进

使用二个空格缩进（PS：明河一般使用四个空格缩进-_-!）
<ul>

<li>Fantastic</li>

<li>Great</li>

</ul>
.example {

color: blue;

}

大写

只使用小写。
所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。
不推荐的写法：
<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>



<ul>

<li>Apples</li>

<li>Oranges</li>

</ul>

常规html设计规则

文档类型

使用html5文档声明：
<!DOCTYPE html>
不再使用XHTML（ application/xhtml+xml）。

HTML 的正确性

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

<article>This is only a test.

</article>

推荐的写法：
<!DOCTYPE html>

<meta charset="utf-8">

<title>Test</title>

<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以资源的方式引入。
不推荐的写法：
<!DOCTYPE html>

<title>HTML sucks</title>

<link rel="stylesheet" href="base.css" media="screen">

<link rel="stylesheet" href="grid.css" media="screen">

<link rel="stylesheet" href="print.css" media="print">

<h1 style="font-size: 1em;">HTML sucks</h1>

<p>I’ve read about this on a few sites but now I’m sure:

<u>HTML is stupid!!1</u>

<center>I can’t believe there’s no way to control the styling of

my website without doing everything all over again!</center>
推荐的写法：
<!DOCTYPE html>

<title>My first CSS-only redesign</title>

<link rel="stylesheet" href="default.css">

<h1>My first CSS-only redesign</h1>

<p>I’ve read about this on a few sites but today I’m actually

doing it: separating concerns and avoiding anything in the HTML of

my website that is presentational.

<p>It’s awesome!
实体引用

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

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

推荐的写法：

The currency symbol for the Euro is “€”.

可选的标签

忽略一些可选的标签，比如
不推荐的写法：
<!DOCTYPE html>

<html>

  <head>

  <title>Spending money, spending bytes</title>

  </head>

  <body>

  <p>Sic.</p>

  </body>

</html>
推荐的写法：
<!DOCTYPE html>

<title>Saving money, saving bytes</title>

<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格式规则

常规格式

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

<p><em>Space</em>, the final frontier.</p>

</blockquote>
<ul>

  <li>Moe

  <li>Larry

  <li>Curly

</ul>
<table>

  <thead>

  <tr>

  <th scope="col">Income</th>

  <th scope="col">Taxes</th>

  <tbody>

  <tr>

  <td>$ 5.00</td>

  <td>$ 4.50</td>

</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%;

}
每一个超人背后~都有一只默默承受的小怪兽~
查看全文

相关阅读:
day09
初识socket
java正则表达式
 Servlet 3.0 新特性详解
 spring利用PropertiesFactoryBean管理属性配置文件properties
MyBatis获取插入记录的自增主键
 深入学习理解java-ThreadLocal
Mybatis批量执行语句
 MyBatis使用二级缓存
 编码的理解

原文地址：https://www.cnblogs.com/html5salon/p/2549534.html

热门文章
HTML Class 1
day18
day17
day16
day15
day14
day13
day12
day11
day10

google的html/css规范指南

常规样式规则

协议

常规格式规则

缩进

大写

尾部空白

常规Meta规则

编码

注释

行动项目

常规html设计规则

文档类型

HTML 的正确性

HTML 的语义性

多媒体元素降级处理

html、css、javascript三层分离

实体引用

可选的标签

type属性

html格式规则

常规格式

css样式规则

css验证

id和class名

id和class的命名风格

选择器

简化css属性写法

0和单位

属性值出现小数点忽略0

url的引用

16进制符号

前缀

id和class名的分隔符

Hacks

css格式规则

css属性按字母顺序书写

块内容缩进

不可缺少的;

属性值前增加个空格

分隔选择器

1行只有一个css属性，二个规则间有一个空行