google之前出了
javascript規(guī)范指南，中文翻譯
傳送門在此，現(xiàn)在有了html/css規(guī)范指南，明河開始翻譯時版本是2.1。后續(xù)如果google有新的內(nèi)容補充，明河也會跟進(jìn)。
常規(guī)樣式規(guī)則
協(xié)議
引入的assets資源文件（
js、css、圖片文件）忽略協(xié)議（http:, https:），比如：
不推薦的寫法：
<scriptsrc="
推薦的寫法：
<scriptsrc="http://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);
}
關(guān)于google的這點建議，明河倒是覺得有待商榷，有興趣的朋友看
http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just，里面有詳細(xì)的討論，根據(jù)一位網(wǎng)友的測試，相對url在IE7、IE8下存在二次加載的問題。
常規(guī)格式規(guī)則
縮進(jìn)
使用二個空格縮進(jìn)（PS：明河一般使用四個空格縮進(jìn)-_-!）
1<ul>
2 <li>Fantastic</li>
3 <li>Great</li>
4</ul>
1.example {
2 color: blue;
3}
大寫
只使用小寫。
所有的代碼只使用小寫字母（PS:淘寶的做法是如果跟js的DOM操作相關(guān)，作為鉤子使用J_Trigger類似的方式）：包括元素名稱、樣式名、屬性名（除了text/CDATA）。
不推薦的寫法：
1<A HREF="/">Home</A>
推薦的寫法：
1<img src="google.png"alt="Google">
尾部空白
刪掉冗余的行尾空格。
不推薦的寫法：
What?_
推薦的寫法：
Yes please.
常規(guī)Meta規(guī)則
編碼
使用utf-8編碼。
指定頁面的文檔編碼為utf-8
<metacharset="utf-8">
不需要特別指定樣式引用的編碼為utf-8。
（ps：關(guān)于html編碼指定方面的內(nèi)容，可以看
《 Character Sets & Encodings in XHTML, HTML and CSS》）
注釋
如果可能，注釋還是必不可少的。
使用注釋說明下代碼：它包括了什么，它的目的是什么，為什么優(yōu)先使用它。
行動項目
（ps：推薦使用）
google建議養(yǎng)成寫TODO的習(xí)慣，特別是在項目中，記錄下一些要改，但來不及修改的地方，或指派其他同事做修改。
高亮TODO，不同的編輯器有不一樣的方式，比如idea是TODO:
1{# TODO(john.doe): revisit centering #}
2<center>Test</center>
1<!-- TODO: remove optional tags -->
2<ul>
3<li>Apples</li>
4<li>Oranges</li>
5</ul>
常規(guī)html設(shè)計規(guī)則
文檔類型
使用
html5文檔聲明：
1<!DOCTYPE html>
不再使用XHTML（ application/xhtml+xml）。
HTML 的正確性
可以使用一些工具，檢驗?zāi)鉮tml的正確性，比如
W3C HTML validator。
不推薦的寫法：
1<article>This is only a test.
2</article>
推薦的寫法：
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title>Test</title>
4<article>This is only a test.</article>
HTML 的語義性
使用富含語義性的標(biāo)簽（ps:建議掌握html5新增的部分語義標(biāo)簽）。
google特別指出了要確保html的可用性，看下面的代碼
不推薦的寫法：
<divonclick="goToRecommendations();">All recommendations</div>
推薦的寫法：
1<ahref="recommendations/">All recommendations</a>
多媒體元素降級處理
給多媒體元素，比如
canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。
不推薦的寫法：
<img src="spreadsheet.png">
推薦的寫法：
1<img src="spreadsheet.png"alt="Spreadsheet screenshot.">
html、css、javascript三層分離
盡可能保持結(jié)構(gòu)（html結(jié)構(gòu)標(biāo)簽）、描述（css）、行為（javascript）的分離，并且讓他們盡可能少的交互。確保html文檔內(nèi)容只有html的結(jié)構(gòu)，將css和javascript以資源的方式引入。
不推薦的寫法：
01<!DOCTYPE html>
02<title>HTML sucks</title>
03<link rel="stylesheet" href="base.css" media="screen">
04<link rel="stylesheet" href="grid.css" media="screen">
05<link rel="stylesheet" href="print.css" media="print">
06<h1 style="font-size: 1em;">HTML sucks</h1>
07<p>I’ve read about this on a few sites but now I’m sure:
08 <u>HTML is stupid!!1</u>
09<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 “€”.
可選的標(biāo)簽
忽略一些可選的標(biāo)簽，比如
不推薦的寫法：
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標(biāo)簽。
所有可忽略的標(biāo)簽，可以看
《 HTML5 specification 》，
type屬性
樣式和腳本引用可以忽略type屬性。
不推薦的寫法：
1<link rel="stylesheet">
推薦的寫法：
1<link rel="stylesheet">
不推薦的寫法：
1<script src="http://www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>
推薦的寫法：
1<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
html格式規(guī)則
常規(guī)格式
每一塊、每一列表、每一表格元素都需要另起一行，并縮進(jìn)每個子元素。
01<blockquote>
02 <p><em>Space</em>, the final frontier.</p>
03</blockquote>
04<ul>
05 <li>Moe
06 <li>Larry
07 <li>Curly
08</ul>
09<table>
10 <thead>
11 <tr>
12 <th scope="col">Income</th>
13 <th scope="col">Taxes</th>
14 <tbody>
15 <tr>
16 <td>$ 5.00</td>
17 <td>$ 4.50</td>
18</table>
css樣式規(guī)則
css驗證
盡可能驗證css的合法性，可以使用
W3C CSS validator。
id和class名
使用富有含義和通用的id和class名。
(ps：明河經(jīng)常聽周圍的同事感慨，取好名字，也是個學(xué)問，有時候有些命名會讓你很糾結(jié)，但好的命名的確可以提高可讀性和可維護(hù)性。)
使用功能性和通用性的命名方式減少文檔或模板的不必要的改動。
不推薦的寫法：
1/* Not recommended: meaningless */
2#yee-1901{}
3
4/* Not recommended: presentational */
5.button-green{}
6.clear {}
推薦的寫法：
1/* Recommended: specific */
2#gallery {}
3#login {}
4.video {}
5
6/* Recommended: generic */
7.aux {}
8.alt {}
id和class的命名風(fēng)格
id和class的命名在保持語義性的同時盡可能的短。
不推薦的寫法：
1#navigation {}
2.atr {}
推薦的寫法：
1#nav {}
2.author {}
可以縮寫單詞，但縮寫后務(wù)必能讓人明白其含義。比如author縮寫成atr就非常費解。
選擇器
避免出現(xiàn)多余的祖先選擇器。（存在性能上的差異問題，可以看
performance reasons）
避免出現(xiàn)元素標(biāo)簽名作為選擇器的一部分。
不推薦的寫法：
1ul#example {}
2div.error {}
推薦的寫法：
1#example {}
2.error {}
簡化css屬性寫法
不推薦的寫法：
1border-top-style: none;
2font-family: palatino, georgia, serif;
3font-size: 100%;
4line-height: 1.6;
5padding-bottom: 2em;
6padding-left: 1em;
7padding-right: 1em;
8padding-top: 0;
推薦的寫法：
1border-top: 0;
2font: 100%/1.6palatino, georgia, serif;
3padding: 01em2em;
使用簡潔的屬性寫法有利于提高可讀性和解析效率。
0和單位
屬性值為0時，忽略單位。
1margin: 0;
2padding: 0;
屬性值出現(xiàn)小數(shù)點忽略0
1font-size: .8em;
url的引用
使用url()時忽略刮號中的”"。
1@import url(//www.google.com/css/go.css);
16進(jìn)制符號
不推薦的寫法：
1color: #eebbcc;
推薦的寫法：
1color: #ebc;
前綴
給選擇器樣式名增加前綴（可選）。
在大的項目（多人協(xié)作）中使用前綴可以減少樣式?jīng)_突，同時可以明確選擇器歸屬含義。
1.adw-help{} /* AdWords */
2#maia-note {} /* Maia */
（PS:一般明河使用前綴來定位樣式的歸屬，比如.nav-item，表明是nav導(dǎo)航下的子元素樣式。）
id和class名的分隔符
單詞使用“-”來連接。
不推薦的寫法：
1/* Not recommended: does not separate the words “demo” and “image” */
2.demoimage {}
3
4/* Not recommended: uses underscore instead of hyphen */
5.error_status {}
推薦的寫法：
1#video-id {}
2.ads-sample {}
Hacks
盡可能地避免使用hack的方式解決瀏覽器樣式兼容性問題。
（ps：明河覺得這個很難，畢竟IE橫在那里。）
盡量避免使用CSS filters。
css格式規(guī)則
css屬性按字母順序書寫
（PS：排序忽略瀏覽器前綴，比如-moz-，-webkit-）
1background: fuchsia;
2border: 1pxsolid;
3-moz-border-radius: 4px;
4-webkit-border-radius: 4px;
5border-radius: 4px;
6color: black;
7text-align: center;
8text-indent: 2em;
塊內(nèi)容縮進(jìn)
1@media screen, projection{
2
3 html {
4 background: #fff;
5 color: #444;
6 }
7
8}
縮進(jìn)所有的
塊狀內(nèi)容。
不可缺少的;
不推薦的寫法：
1.test {
2 display: block;
3 height: 100px
4}
推薦的寫法：
1.test {
2 display: block;
3 height: 100px;
4}
屬性值前增加個空格
不推薦的寫法：
1h3{
2 font-weight:bold;
3}
推薦的寫法：
1h3{
2 font-weight: bold;
3}
分隔選擇器
不推薦的寫法：
1a:focus, a:active {
2 position: relative; top: 1px;
3}
推薦的寫法：
1h1,
2h2,
3h3{
4 font-weight: normal;
5 line-height: 1.2;
6}
1行只有一個css屬性，二個規(guī)則間有一個空行
1html {
2 background: #fff;
3}
4
5body {
6 margin: auto;
7 width: 50%;
8}
