google的html/css规范指南
2012-06-14 16:39
447 查看
google之前出了javascript规范指南,中文翻译传送门在此,现在有了html/css规范指南,明河开始翻译时版本是2.1。后续如果google有新的内容补充,明河也会跟进。
引入的assets资源文件(js、css、图片文件)忽略协议(http:, https:),比如:
不推荐的写法:
推荐的写法:
不推荐的写法:
推荐的写法:
关于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>
大写
只使用小写。
所有的代码只使用小写字母(PS:淘宝的做法是如果跟js的DOM操作相关,作为钩子使用J_Trigger类似的方式):包括元素名称、样式名、属性名(除了text/CDATA)。
不推荐的写法:
<A HREF="/">Home</A>
推荐的写法:
尾部空白
删掉冗余的行尾空格。
不推荐的写法:
推荐的写法:
使用utf-8编码。
指定页面的文档编码为utf-8
不需要特别指定样式引用的编码为utf-8。
(ps:关于html编码指定方面的内容,可以看《 Character Sets & Encodings in XHTML, HTML and CSS》)
注释
如果可能,注释还是必不可少的。
使用注释说明下代码:它包括了什么,它的目的是什么,为什么优先使用它。
行动项目
(ps:推荐使用)
google建议养成写TODO的习惯,特别是在项目中,记录下一些要改,但来不及修改的地方,或指派其他同事做修改。
高亮TODO,不同的编辑器有不一样的方式,比如idea是TODO:。
使用html5文档声明:
<!DOCTYPE html>
不再使用XHTML( application/xhtml+xml)。
HTML 的正确性
可以使用一些工具,检验你html的正确性,比如 W3C HTML validator。
不推荐的写法:
推荐的写法:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
HTML 的语义性
使用富含语义性的标签(ps:建议掌握html5新增的部分语义标签)。
google特别指出了要确保html的可用性,看下面的代码
不推荐的写法:
推荐的写法:
多媒体元素降级处理
给多媒体元素,比如canvas、videos、 images增加alt属性,提高可用性(特别是常用的img标签,尽可量得加上alt属性,提供图片的描述信息)。
不推荐的写法:
推荐的写法:
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 ☺的实体引用。
不推荐的写法:
推荐的写法:
可选的标签
忽略一些可选的标签,比如
不推荐的写法:
<!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属性。
不推荐的写法:
推荐的写法:
不推荐的写法:
推荐的写法:
每一块、每一列表、每一表格元素都需要另起一行,并缩进每个子元素。
<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的合法性,可以使用 W3C CSS validator。
id和class名
使用富有含义和通用的id和class名。
(ps:明河经常听周围的同事感慨,取好名字,也是个学问,有时候有些命名会让你很纠结,但好的命名的确可以提高可读性和可维护性。)
使用功能性和通用性的命名方式减少文档或模板的不必要的改动。
不推荐的写法:
推荐的写法:
id和class的命名风格
id和class的命名在保持语义性的同时尽可能的短。
不推荐的写法:
推荐的写法:
可以缩写单词,但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。
选择器
避免出现多余的祖先选择器。(存在性能上的差异问题,可以看 performance reasons)
避免出现元素标签名作为选择器的一部分。
不推荐的写法:
推荐的写法:
简化css属性写法
不推荐的写法:
推荐的写法:
使用简洁的属性写法有利于提高可读性和解析效率。
0和单位
属性值为0时,忽略单位。
属性值出现小数点忽略0
url的引用
使用url()时忽略刮号中的”"。
16进制符号
不推荐的写法:
推荐的写法:
前缀
给选择器样式名增加前缀(可选)。
在大的项目(多人协作)中使用前缀可以减少样式冲突,同时可以明确选择器归属含义。
(PS:一般明河使用前缀来定位样式的归属,比如.nav-item,表明是nav导航下的子元素样式。)
id和class名的分隔符
单词使用“-”来连接。
不推荐的写法:
推荐的写法:
Hacks
尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
(ps:明河觉得这个很难,毕竟IE横在那里。)
尽量避免使用CSS filters。
(PS:排序忽略浏览器前缀,比如-moz-,-webkit-)
块内容缩进
缩进所有的块状内容。
不可缺少的;
不推荐的写法:
推荐的写法:
属性值前增加个空格
不推荐的写法:
推荐的写法:
分隔选择器
不推荐的写法:
推荐的写法:
1行只有一个css属性,二个规则间有一个空行
常规样式规则
协议引入的assets资源文件(js、css、图片文件)忽略协议(http:, https:),比如:
不推荐的写法:
常规格式规则
缩进使用二个空格缩进(PS:明河一般使用四个空格缩进-_-!)
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
只使用小写。
所有的代码只使用小写字母(PS:淘宝的做法是如果跟js的DOM操作相关,作为钩子使用J_Trigger类似的方式):包括元素名称、样式名、属性名(除了text/CDATA)。
不推荐的写法:
<A HREF="/">Home</A>
推荐的写法:
删掉冗余的行尾空格。
不推荐的写法:
常规Meta规则
编码使用utf-8编码。
指定页面的文档编码为utf-8
(ps:关于html编码指定方面的内容,可以看《 Character Sets & Encodings in XHTML, HTML and CSS》)
注释
如果可能,注释还是必不可少的。
使用注释说明下代码:它包括了什么,它的目的是什么,为什么优先使用它。
行动项目
(ps:推荐使用)
google建议养成写TODO的习惯,特别是在项目中,记录下一些要改,但来不及修改的地方,或指派其他同事做修改。
高亮TODO,不同的编辑器有不一样的方式,比如idea是TODO:。
常规html设计规则
文档类型使用html5文档声明:
<!DOCTYPE html>
不再使用XHTML( application/xhtml+xml)。
HTML 的正确性
可以使用一些工具,检验你html的正确性,比如 W3C HTML validator。
不推荐的写法:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
HTML 的语义性
使用富含语义性的标签(ps:建议掌握html5新增的部分语义标签)。
google特别指出了要确保html的可用性,看下面的代码
不推荐的写法:
给多媒体元素,比如canvas、videos、 images增加alt属性,提高可用性(特别是常用的img标签,尽可量得加上alt属性,提供图片的描述信息)。
不推荐的写法:
尽可能保持结构(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 ☺的实体引用。
不推荐的写法:
忽略一些可选的标签,比如
不推荐的写法:
<!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属性。
不推荐的写法:
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:明河经常听周围的同事感慨,取好名字,也是个学问,有时候有些命名会让你很纠结,但好的命名的确可以提高可读性和可维护性。)
使用功能性和通用性的命名方式减少文档或模板的不必要的改动。
不推荐的写法:
id和class的命名在保持语义性的同时尽可能的短。
不推荐的写法:
选择器
避免出现多余的祖先选择器。(存在性能上的差异问题,可以看 performance reasons)
避免出现元素标签名作为选择器的一部分。
不推荐的写法:
不推荐的写法:
0和单位
属性值为0时,忽略单位。
使用url()时忽略刮号中的”"。
不推荐的写法:
给选择器样式名增加前缀(可选)。
在大的项目(多人协作)中使用前缀可以减少样式冲突,同时可以明确选择器归属含义。
id和class名的分隔符
单词使用“-”来连接。
不推荐的写法:
尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
(ps:明河觉得这个很难,毕竟IE横在那里。)
尽量避免使用CSS filters。
css格式规则
css属性按字母顺序书写(PS:排序忽略浏览器前缀,比如-moz-,-webkit-)
不可缺少的;
不推荐的写法:
不推荐的写法:
不推荐的写法:
相关文章推荐
- Google HTML/CSS代码风格指南(中文版)
- Google HTML/CSS代码风格指南(中文版)
- Google HTML/CSS代码风格指南(中文版)
- Google HTML/CSS 风格指南
- Google HTML/CSS 代码风格指南
- 编写灵活、稳定、高质量的HTML和css代码规范指南
- 谷歌的HTML / CSS规范指南
- HTML/CSS规范指南 From Google
- Google HTML-CSS 编码规范
- Google HTML/CSS代码风格指南(中文版)
- google的html、css代码规范
- Google HTML-CSS 编码规范
- google的html、css代码规范(转)
- 最新最全的CSS规范指南
- [转]Google的Java编程风格指南(Java编码规范)
- HTML和CSS高级指南之六——jQuery
- 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
- 编码规范 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
- Google HTML-CSS 编码规范
- html中css、div命名规范