Google HTML/CSS代碼風格指南

修正版本 2.1
原文:http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

每個風格點都有一個展開/收起按鈕以便你可以得到更多的信息:?. 你可以將全部展開或收起:

? 全部展開/全部收起
內容樹

背景

本文檔定義了HTML/CSS的編寫格式和風格規則。它旨在提高合作和代碼質量,并使其支持基礎架構。適用于HTML/CSS文件,包括GSS文件。 只要代碼質量是可以被維護的,就能很好的被工具混淆、壓縮和合并。

樣式規則

協議

原文 ?
嵌入式資源書寫省略協議頭

排版規則

縮進

原文 ?
每次縮進兩個空格。

大小寫

原文 ?
只用小寫字母。

行尾空格

原文 ?
刪除行尾白空格。

元數據規則

編碼

原文 ?
用不帶BOM頭的 UTF-8編碼。

注釋

原文 ?
盡可能的去解釋你寫的代碼。

活動的條目

原文 ?
TODO 標記代辦事項和正活動的條目

HTML代碼風格規則

文檔類型

原文 ?
請使用HTML5標準。

HTML代碼有效性

原文 ?
盡量使用有效的HTML代碼。

語義

原文 ?
根據HTML各個元素的用途而去使用它們。

多媒體后備方案

原文 ?
為多媒體提供備選內容。

關注點分離

原文 ?
將表現和行為分開。

實體引用

原文 ?
不要用實體引用。

可選標簽

原文 ?
省略可選標簽(可選)。

type屬性

原文 ?
在樣式表和腳本的標簽中忽略 type 屬性

HTML代碼格式規則

格式

原文 ?
每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。

CSS代碼風格規則

CSS代碼有效性

原文 ?
盡量使用有效的CSS代碼。

ID和class的命名

原文 ?
為ID和class取通用且有意義的名字。

ID和class命名風格

原文 ?
非必要的情況下,ID和class的名稱應盡量簡短。

類型選擇器

原文 ?
避免使用CSS類型選擇器。

屬性縮寫

原文 ?
寫屬性值的時候盡量使用縮寫。

0和單位

原文 ?
省略0后面的單位。

0開頭的小數

原文 ?
省略0開頭小數點前面的0。

URI外的引號

原文 ?
省略URI外的引號。

十六進制

原文 ?
十六進制盡可能使用3個字符。

前綴

原文 ?
選擇器前面加上特殊應用標識的前綴(可選)。

ID和class命名的定界符

原文 ?
ID和class名字有多單詞組合的用短破折號“-”分開。

Hacks

原文 ?
最好避免使用該死的CSS “hacks” —— 請先嘗試使用其他的解決方法。

CSS代碼格式規則

聲明順序

原文 ?
依字母順序進行聲明。

代碼塊內容縮進

原文 ?
縮進所有代碼塊(“{}”之間)內容。

聲明完結

原文 ?
所有聲明都要用“;”結尾。

屬性名完結

原文 ?
在屬性名冒號結束后加一個空字符。

選擇器和聲明分行

原文 ?
將選擇器和聲明隔行。

規則分行

原文 ?
每個規則獨立一行。

CSS元數據規則

注釋部分

原文 ?
按組寫注釋。(可選)

吐槽部分

堅持一致原則

如果你要編輯代碼,先花幾分鐘看看它的代碼風格,如果它這么做,那你也應該這么做。

風格統一了,就有了一個共同思維的環境,參與者就可以專注的看你要說什么,而不是先想你是在說哪星球的語言。 雖然我們在這里提出統一樣式規則,但就只是想讓大家都知曉并借鑒而對自己的風格進行修正。 當然,保持自己獨有的風格也是很重要的。balabala……

修正版本 2.1
譯者:chajn - 新浪微博:@chajn

捕鱼达人小游戏