google之前出了javascript规范指南，中文翻译传送门在此，现在有了html/css规范指南，明河开始翻译时版本是2.1。后续如果google有新的内容补充，明河也会跟进。
常规样式规则
协议
引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：
不推荐的写法：
|
|
推荐的写法：
<
script
src
=
"//www.google.com/js/gweb/analytics/autotrack.js"
></
script
>
|
不推荐的写法：
推荐的写法：
.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：明河一般使用四个空格缩进-_-!）
.example {
color
:
blue
;
}
|
大写
只使用小写。
所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。
不推荐的写法：
推荐的写法：
<
img
src
=
"google.png"
alt
=
"Google"
>
|
尾部空白
删掉冗余的行尾空格。
不推荐的写法：
<
p
>What?_
</
p
>
|
推荐的写法：
<
p
>Yes please.
</
p
>
|
常规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文档声明：
不再使用XHTML（ application/xhtml+xml）。
HTML 的正确性
可以使用一些工具，检验你html的正确性，比如 W3C HTML validator。
不推荐的写法：
<
article
>This is only a test.
</
article
>
|
推荐的写法：
HTML 的语义性
使用富含语义性的标签（ps:建议掌握html5新增的部分语义标签）。
google特别指出了要确保html的可用性，看下面的代码
不推荐的写法：
<
div
onclick
=
"goToRecommendations();"
>All recommendations</
div
>
|
推荐的写法：
<
a
href
=
"recommendations/"
class
=
"broken_link"
>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以资源的方式引入。
不推荐的写法：
推荐的写法：
实体引用
在html页面中避免使用实体引用。
如果你的文件是utf-8编码，就不需要使用像 —, ”, or ☺的实体引用。
不推荐的写法：
The currency symbol for the Euro is “&eur;”.
|
推荐的写法：
The currency symbol for the Euro is “€”.
|
可选的标签
忽略一些可选的标签，比如
不推荐的写法：
推荐的写法：
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格式规则
常规格式
每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。
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
;
}
|
属性值前增加个空格
不推荐的写法：
h
3
{
font-weight
:
bold
;
}
|
推荐的写法：
h
3
{
font-weight
:
bold
;
}
|
分隔选择器
不推荐的写法：
a:focus, a:active {
position
:
relative
;
top
:
1px
;
}
|
推荐的写法：
h
1
,
h
2
,
h
3
{
font-weight
:
normal
;
line-height
:
1.2
;
}
|
1行只有一个css属性，二个规则间有一个空行
html {
background
:
#fff
;
}
body {
margin
:
auto
;
width
:
50%
;
}
|
扫一扫
4745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
