修正版本 2.1
每個風(fēng)格點都有一個展開/收起按鈕以便你可以得到更多的信息:. 你可以將全部展開或收起:
本文檔定義了HTML/CSS的編寫格式和風(fēng)格規(guī)則。它旨在提高合作和代碼質(zhì)量,并使其支持基礎(chǔ)架構(gòu)。適用于HTML/CSS文件，包括GSS文件。 只要代碼質(zhì)量是可以被維護的，就能很好的被工具混淆、壓縮和合并。
省略圖像、媒體文件、樣式表和腳本等URL協(xié)議頭部聲明 ( http: , https: )。如果不是這兩個聲明的URL則不省略。
省略協(xié)議聲明，使URL成相對地址，防止內(nèi)容混淆問題和導(dǎo)致小文件重復(fù)下載。
<!-- 不推薦 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推薦 --><script src="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);}所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和 CDATA ）， 選擇器，特性，特性值（除了字符串）。
<!-- 不推薦 --><A HREF="/">Home</A>
<!-- 推薦 --><img src="google.png" alt="Google">
讓你的編輯器用沒有字節(jié)順序標記的UTF-8編碼格式進行編寫。
在HTML模板和文件中指定編碼 <meta charset="utf-8"> . 不需要制定樣式表的編碼，它默認為UTF-8.
（更多有關(guān)于編碼的信息和怎樣指定它，請查看 Character Sets & Encodings in XHTML, HTML and CSS。）
用注釋來解釋代碼：它包括什么，它的目的是什么，它能做什么，為什么使用這個解決方案，還是說只是因為偏愛如此呢？
（本規(guī)則可選，沒必要每份代碼都描述的很充分，它會增重HTML和CSS的代碼。這取決于該項目的復(fù)雜程度。）
TODO 標記代辦事項和正活動的條目 只用 TODO 來強調(diào)代辦事項， 不要用其他的常見格式，例如 @@ 。
附加聯(lián)系人（用戶名或電子郵件列表），用括號括起來，例如 TODO(contact) 。
可在冒號之后附加活動條目說明等，例如 TODO: 活動條目說明 。
{# TODO(cha.jn): 重新置中 #}<center>Test</center><!-- TODO: 刪除可選元素 --><ul> <li>Apples</li> <li>Oranges</li></ul>
HTML5是目前所有HTML文檔類型中的首選： <!DOCTYPE html> .
（推薦用HTML文本文檔格式，即 text/html . 不要用 XHTML。 XHTML格式，即 application/xhtml+xml , 有倆瀏覽器完全不支持，還比HTML用更多的存儲空間。）
編寫有效的HTML代碼，否則很難達到性能上的提升。
用類似這樣的工具 W3C HTML validator 來進行測試。
HTML代碼有效性是重要的質(zhì)量衡量標準，并可確保HTML代碼可以正確使用。
<!-- 不推薦 --><title>Test</title><article>This is only a test.
<!-- 推薦 --><!DOCTYPE html><meta charset="utf-8"><title>Test</title><article>This is only a test.</article>
使用元素 (有時候錯稱其為“標簽”) 要知道為什么去使用它們和是否正確。 例如，用heading元素構(gòu)造標題， p 元素構(gòu)造段落, a 元素構(gòu)造錨點等。
根據(jù)HTML各個元素的用途而去使用是很重要的，它涉及到文檔的可訪問性、重用和代碼效率等問題。
<!-- 不推薦 --><div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 --><a href="recommendations/">All recommendations</a>
對于多媒體，如圖像，視頻，通過 canvas 讀取的動畫元素，確保提供備選方案。 對于圖像使用有意義的備選文案（ alt ） 對于視頻和音頻使用有效的副本和文案說明。
提供備選內(nèi)容是很重要的，原因：給盲人用戶以一些提示性的文字，用 @alt 告訴他這圖像是關(guān)于什么的，給可能沒理解視頻或音頻的內(nèi)容的用戶以提示。
（圖像的 alt 屬性會產(chǎn)生冗余，如果使用圖像只是為了不能立即用CSS而裝飾的 ，就不需要用備選文案了，可以寫 alt="" 。）
<!-- 不推薦 --><img src="spreadsheet.png">
<!-- 推薦 --><img src="spreadsheet.png" alt="電子表格截圖">
嚴格保持結(jié)構(gòu) （標記），表現(xiàn) （樣式），和行為 （腳本）分離, 并盡量讓這三者之間的交互保持最低限度。
確保文檔和模板只包含HTML結(jié)構(gòu)， 把所有表現(xiàn)都放到樣式表里，把所有行為都放到腳本里。
此外，盡量使腳本和樣式表在文檔與模板中有最小接觸面積，即減少外鏈。
將表現(xiàn)和行為分開維護是很重要滴，因為更改HTML文檔結(jié)構(gòu)和模板會比更新樣式表和腳本更花費成本。
<!-- 不推薦 --><!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!
不需要使用類似 — 、 ” 和 ☺ 等的實體引用, 假定團隊之間所用的文件和編輯器是同一編碼（UTF-8）。
在HTML文檔中具有特殊含義的字符（例如 < 和 & )為例外， 噢對了，還有 “不可見” 字符 （例如no-break空格）。
<!-- 不推薦 -->歐元貨幣符號是 “&eur;”。
<!-- 推薦 -->歐元貨幣符號是 “€”。
type 屬性 在樣式表（除非不用 CSS）和腳本（除非不用 JavaScript）的標簽中 不寫 type 屬性。
HTML5默認 type 為 text/css 和 text/javascript 類型，所以沒必要指定。即便是老瀏覽器也是支持的。
<!-- 不推薦 --><link rel="stylesheet" type="text/css">
<!-- 推薦 --><link rel="stylesheet" >
<!-- 不推薦 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推薦 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
獨立元素的樣式（as CSS allows elements to assume a different role per display property), 將塊元素、列表元素或表格元素都放在新行。
另外，需要縮進塊元素、列表元素或表格元素的子元素。
（如果出現(xiàn)了列表項左右空文本節(jié)點問題，可以試著將所有的 li 元素都放在一行。 A linter is encouraged to throw a warning instead of an error.)
<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 scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50</table>
使用有效的CSS代碼，除非是處理CSS校驗器程序錯誤或者需要專有語法。
用類似W3C CSS validator 這樣的工具來進行有效性的測試。
使用有效的CSS是重要的質(zhì)量衡量標準，如果發(fā)現(xiàn)有的CSS代碼沒有任何效果的可以刪除，確保CSS用法適當。
應(yīng)該從ID和class的名字上就能看出這元素是干嘛用的，而不是表象或模糊不清的命名。
應(yīng)該優(yōu)先慮以這元素具體目來進行命名，這樣他就最容易理解，減少更新。
通用名稱可以加在兄弟元素都不特殊或沒有個別意義的元素上，可以起名類似“helpers”這樣的泛。
使用功能性或通用的名字會減少不必要的文檔或模板修改。
/* 不推薦: 無意義 不易理解 */#yee-1901 {}/* 不推薦: 表達不具體 */.button-green {}.clear {}/* 推薦: 明確詳細 */#gallery {}#login {}.video {}/* 推薦: 通用 */.aux {}.alt {}簡要傳達ID或class是關(guān)于什么的。
通過這種方式，似的代碼易懂且高效。
/* 不推薦 */#navigation {}.atr {}/* 推薦 */#nav {}.author {}非必要的情況下不要使用元素標簽名和ID或class進行組合。
出于性能上的考慮避免使用父輩節(jié)點做選擇器 performance reasons.
/* 不推薦 */ul#example {}div.error {}/* 推薦 */#example {}.error {}CSS很多屬性都支持縮寫shorthand （例如 font ） 盡量使用縮寫，甚至只設(shè)置一個值。
使用縮寫可以提高代碼的效率和方便理解。
/* 不推薦 */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;
大型項目中最好在ID或class名字前加上這種標識性前綴（命名空間），使用短破折號鏈接。
使用命名空間可以防止命名沖突，方便維護，比如在搜索和替換操作上。
.adw-help {} /* AdWords */#maia-note {} /* Maia */別在選擇器名字里用短破折號“-”以外的連接詞(包括啥也沒有)， 以增進對名字的理解和查找。
/* 不推薦：“demo”和“image”中間沒加“-” */.demoimage {}/* 不推薦：用下劃線“_”是屌絲的風(fēng)格 */.error_status {}/* 推薦 */#video-id {}.ads-sample {}雖然它很有誘惑力，可以當作用戶代理檢測或特殊的CSS過濾器，但它的行為太過于頻繁，會長期傷害項目的效率和代碼管理，所以能用其他的解決方案就找其他的。
都按字母順序聲明，很容易記住和維護。
忽略瀏覽器的特定前綴排序，但多瀏覽器特定的某個CSS屬性前綴應(yīng)相對保持排序（例如-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;
縮進所有代碼塊的內(nèi)容，它能夠提高層次結(jié)構(gòu)的清晰度。
@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;}如果可以，按照功能的類別來對一組樣式表寫統(tǒng)一注釋。獨立成行。
/* Header */#adw-header {}/* Footer */#adw-footer {}/* Gallery */.adw-gallery {}堅持一致原則
如果你要編輯代碼，先花幾分鐘看看它的代碼風(fēng)格，如果它這么做，那你也應(yīng)該這么做。
風(fēng)格統(tǒng)一了，就有了一個共同思維的環(huán)境，參與者就可以專注的看你要說什么，而不是先想你是在說哪星球的語言。 雖然我們在這里提出統(tǒng)一樣式規(guī)則，但就只是想讓大家都知曉并借鑒而對自己的風(fēng)格進行修正。 當然，保持自己獨有的風(fēng)格也是很重要的。balabala……
修正版本 2.1
譯者：chajn
新浪微博：@chajn
于 2012-04-28
那暗淡的夜晚
