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：明河一般使用四個空格縮進-_-!）
- <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
>
|
<!-- TODO: remove optional tags -->
<
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
;
}
|
屬性值前增加個空格
不推薦的寫法：
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%
;
}
|