Google HTML/CSS代碼風(fēng)格指南

ksnail 2012-05-25

展開(kāi)全文

Google HTML/CSS代碼風(fēng)格指南

修正版本 2.1

每個(gè)風(fēng)格點(diǎn)都有一個(gè)展開(kāi)/收起按鈕以便你可以得到更多的信息:. 你可以將全部展開(kāi)或收起:

全部展開(kāi)/全部收起

內(nèi)容樹(shù)

樣式規(guī)則	協(xié)議
排版規(guī)則	縮進(jìn) 大小寫(xiě) 行尾空格
元數(shù)據(jù)規(guī)則	編碼注釋活動(dòng)的條目
HTML代碼風(fēng)格規(guī)則	文檔類型 HTML有效性語(yǔ)義多媒體后備方案關(guān)注點(diǎn)分離實(shí)體引用可選標(biāo)簽 type屬性
HTML代碼格式規(guī)則	格式
CSS代碼風(fēng)格規(guī)則	CSS代碼有效性 ID和class的命名 ID和class命名風(fēng)格類型選擇器屬性縮寫(xiě) 0和單位 0開(kāi)頭的小數(shù) URI外的引號(hào) 十六進(jìn)制前綴 ID和class命名的定界符 Hacks
CSS代碼格式規(guī)則	聲明順序代碼塊內(nèi)容縮進(jìn) 聲明完結(jié) 屬性名完結(jié) 選擇器和聲明分行規(guī)則分行
CSS元數(shù)據(jù)規(guī)則	注釋部分

背景

本文檔定義了HTML/CSS的編寫(xiě)格式和風(fēng)格規(guī)則。它旨在提高合作和代碼質(zhì)量,并使其支持基礎(chǔ)架構(gòu)。適用于HTML/CSS文件，包括GSS文件。只要代碼質(zhì)量是可以被維護(hù)的，就能很好的被工具混淆、壓縮和合并。

樣式規(guī)則

協(xié)議

原文 ▽

嵌入式資源書(shū)寫(xiě)省略協(xié)議頭

省略圖像、媒體文件、樣式表和腳本等URL協(xié)議頭部聲明 ( http: , https: )。如果不是這兩個(gè)聲明的URL則不省略。

省略協(xié)議聲明，使URL成相對(duì)地址，防止內(nèi)容混淆問(wèn)題和導(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);
}

排版規(guī)則

縮進(jìn)

原文 ▽

每次縮進(jìn)兩個(gè)空格。

不要用TAB鍵或多個(gè)空格來(lái)進(jìn)行縮進(jìn)。

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

大小寫(xiě)

原文 ▽

只用小寫(xiě)字母。

所有的代碼都用小寫(xiě)字母：適用于元素名，屬性，屬性值（除了文本和 CDATA ），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png" alt="Google">

行尾空格

原文 ▽

刪除行尾白空格。

行尾空格沒(méi)必要存在。

<!-- 不推薦 -->
<p>What?_

<!-- 推薦 -->
<p>Yes please.

元數(shù)據(jù)規(guī)則

編碼

原文 ▽

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

讓你的編輯器用沒(méi)有字節(jié)順序標(biāo)記的UTF-8編碼格式進(jìn)行編寫(xiě)。

在HTML模板和文件中指定編碼 <meta charset="utf-8"> . 不需要制定樣式表的編碼，它默認(rèn)為UTF-8.

（更多有關(guān)于編碼的信息和怎樣指定它，請(qǐng)查看 Character Sets & Encodings in XHTML, HTML and CSS。）

注釋

原文 ▽

盡可能的去解釋你寫(xiě)的代碼。

用注釋來(lái)解釋代碼：它包括什么，它的目的是什么，它能做什么，為什么使用這個(gè)解決方案，還是說(shuō)只是因?yàn)槠珢?ài)如此呢？

（本規(guī)則可選，沒(méi)必要每份代碼都描述的很充分，它會(huì)增重HTML和CSS的代碼。這取決于該項(xiàng)目的復(fù)雜程度。）

活動(dòng)的條目

原文 ▽

用 TODO 標(biāo)記代辦事項(xiàng)和正活動(dòng)的條目

只用 TODO 來(lái)強(qiáng)調(diào)代辦事項(xiàng)，不要用其他的常見(jiàn)格式，例如 @@ 。

附加聯(lián)系人（用戶名或電子郵件列表），用括號(hào)括起來(lái)，例如 TODO(contact) 。

可在冒號(hào)之后附加活動(dòng)條目說(shuō)明等，例如 TODO: 活動(dòng)條目說(shuō)明 。

{# TODO(cha.jn): 重新置中 #}
<center>Test</center>

<!-- TODO: 刪除可選元素 -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML代碼風(fēng)格規(guī)則

文檔類型

原文 ▽

請(qǐng)使用HTML5標(biāo)準(zhǔn)。

HTML5是目前所有HTML文檔類型中的首選： <!DOCTYPE html> .

（推薦用HTML文本文檔格式，即 text/html . 不要用 XHTML。 XHTML格式，即 application/xhtml+xml , 有倆瀏覽器完全不支持，還比HTML用更多的存儲(chǔ)空間。）

HTML代碼有效性

原文 ▽

盡量使用有效的HTML代碼。

編寫(xiě)有效的HTML代碼，否則很難達(dá)到性能上的提升。

用類似這樣的工具 W3C HTML validator 來(lái)進(jìn)行測(cè)試。

HTML代碼有效性是重要的質(zhì)量衡量標(biāo)準(zhǔn)，并可確保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>

語(yǔ)義

原文 ▽

根據(jù)HTML各個(gè)元素的用途而去使用它們。

使用元素 (有時(shí)候錯(cuò)稱其為“標(biāo)簽”) 要知道為什么去使用它們和是否正確。例如，用heading元素構(gòu)造標(biāo)題， p 元素構(gòu)造段落, a 元素構(gòu)造錨點(diǎn)等。

根據(jù)HTML各個(gè)元素的用途而去使用是很重要的，它涉及到文檔的可訪問(wèn)性、重用和代碼效率等問(wèn)題。

<!-- 不推薦 -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 推薦 -->
<a href="recommendations/">All recommendations</a>

多媒體后備方案

原文 ▽

為多媒體提供備選內(nèi)容。

對(duì)于多媒體，如圖像，視頻，通過(guò) canvas 讀取的動(dòng)畫(huà)元素，確保提供備選方案。對(duì)于圖像使用有意義的備選文案（ alt ）對(duì)于視頻和音頻使用有效的副本和文案說(shuō)明。

提供備選內(nèi)容是很重要的，原因：給盲人用戶以一些提示性的文字，用 @alt 告訴他這圖像是關(guān)于什么的，給可能沒(méi)理解視頻或音頻的內(nèi)容的用戶以提示。

（圖像的 alt 屬性會(huì)產(chǎn)生冗余，如果使用圖像只是為了不能立即用CSS而裝飾的，就不需要用備選文案了，可以寫(xiě) alt="" 。）

<!-- 不推薦 -->
<img src="spreadsheet.png">

<!-- 推薦 -->
<img src="spreadsheet.png" alt="電子表格截圖">

關(guān)注點(diǎn)分離

原文 ▽

將表現(xiàn)和行為分開(kāi)。

嚴(yán)格保持結(jié)構(gòu) （標(biāo)記），表現(xiàn) （樣式），和行為（腳本）分離, 并盡量讓這三者之間的交互保持最低限度。

確保文檔和模板只包含HTML結(jié)構(gòu)，把所有表現(xiàn)都放到樣式表里，把所有行為都放到腳本里。

此外，盡量使腳本和樣式表在文檔與模板中有最小接觸面積，即減少外鏈。

將表現(xiàn)和行為分開(kāi)維護(hù)是很重要滴，因?yàn)楦腍TML文檔結(jié)構(gòu)和模板會(huì)比更新樣式表和腳本更花費(fèi)成本。

<!-- 不推薦 -->
<!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!

實(shí)體引用

原文 ▽

不要用實(shí)體引用。

不需要使用類似 — 、 ” 和 ☺ 等的實(shí)體引用, 假定團(tuán)隊(duì)之間所用的文件和編輯器是同一編碼（UTF-8）。

在HTML文檔中具有特殊含義的字符（例如 < 和 & )為例外，噢對(duì)了，還有 “不可見(jiàn)” 字符（例如no-break空格）。

<!-- 不推薦 -->
歐元貨幣符號(hào)是 &ldquo;&eur;&rdquo;。

<!-- 推薦 -->
歐元貨幣符號(hào)是 “€”。

可選標(biāo)簽

原文 ▽

省略可選標(biāo)簽（可選）。

出于優(yōu)化文件大小和校驗(yàn)，可以考慮省略可選標(biāo)簽，哪些是可選標(biāo)簽可以參考 HTML5 specification。

（這種方法可能需要更精準(zhǔn)的規(guī)范來(lái)制定，眾多的開(kāi)發(fā)者對(duì)此的觀點(diǎn)也都不同?？紤]到一致性和簡(jiǎn)潔的原因，省略所有可選標(biāo)記是有必要的。）

<!-- 不推薦 -->
<!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.

type屬性

原文 ▽

在樣式表和腳本的標(biāo)簽中忽略 type 屬性

在樣式表（除非不用 CSS）和腳本（除非不用 JavaScript）的標(biāo)簽中不寫(xiě) type 屬性。

HTML5默認(rèn) type 為 text/css 和 text/javascript 類型，所以沒(méi)必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<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>

HTML代碼格式規(guī)則

格式

原文 ▽

每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對(duì)于父元素進(jìn)行縮進(jìn)。

獨(dú)立元素的樣式（as CSS allows elements to assume a different role per display property), 將塊元素、列表元素或表格元素都放在新行。

另外，需要縮進(jìn)塊元素、列表元素或表格元素的子元素。

（如果出現(xiàn)了列表項(xiàng)左右空文本節(jié)點(diǎn)問(wèn)題，可以試著將所有的 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代碼風(fēng)格規(guī)則

CSS代碼有效性

原文 ▽

盡量使用有效的CSS代碼。

使用有效的CSS代碼，除非是處理CSS校驗(yàn)器程序錯(cuò)誤或者需要專有語(yǔ)法。

用類似W3C CSS validator 這樣的工具來(lái)進(jìn)行有效性的測(cè)試。

使用有效的CSS是重要的質(zhì)量衡量標(biāo)準(zhǔn)，如果發(fā)現(xiàn)有的CSS代碼沒(méi)有任何效果的可以刪除，確保CSS用法適當(dāng)。

ID和class的命名

原文 ▽

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

應(yīng)該從ID和class的名字上就能看出這元素是干嘛用的，而不是表象或模糊不清的命名。

應(yīng)該優(yōu)先慮以這元素具體目來(lái)進(jìn)行命名，這樣他就最容易理解，減少更新。

通用名稱可以加在兄弟元素都不特殊或沒(méi)有個(gè)別意義的元素上，可以起名類似“helpers”這樣的泛。

使用功能性或通用的名字會(huì)減少不必要的文檔或模板修改。

/* 不推薦: 無(wú)意義 不易理解 */
#yee-1901 {}

/* 不推薦: 表達(dá)不具體 */
.button-green {}
.clear {}

/* 推薦: 明確詳細(xì) */
#gallery {}
#login {}
.video {}

/* 推薦: 通用 */
.aux {}
.alt {}

ID和class命名風(fēng)格

原文 ▽

非必要的情況下，ID和class的名稱應(yīng)盡量簡(jiǎn)短。

簡(jiǎn)要傳達(dá)ID或class是關(guān)于什么的。

通過(guò)這種方式，似的代碼易懂且高效。

/* 不推薦 */
#navigation {}
.atr {}

/* 推薦 */
#nav {}
.author {}

類型選擇器

原文 ▽

避免使用CSS類型選擇器。

非必要的情況下不要使用元素標(biāo)簽名和ID或class進(jìn)行組合。

出于性能上的考慮避免使用父輩節(jié)點(diǎn)做選擇器 performance reasons.

/* 不推薦 */
ul#example {}
div.error {}

/* 推薦 */
#example {}
.error {}

屬性縮寫(xiě)

原文 ▽

寫(xiě)屬性值的時(shí)候盡量使用縮寫(xiě)。

CSS很多屬性都支持縮寫(xiě)shorthand （例如 font ）盡量使用縮寫(xiě)，甚至只設(shè)置一個(gè)值。

使用縮寫(xiě)可以提高代碼的效率和方便理解。

/* 不推薦 */
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后面的單位。

非必要的情況下 0 后面不用加單位。

margin: 0;
padding: 0;

0開(kāi)頭的小數(shù)

原文 ▽

省略0開(kāi)頭小數(shù)點(diǎn)前面的0。

值或長(zhǎng)度在-1與1之間的小數(shù)，小數(shù)前的 0 可以忽略不寫(xiě)。

font-size: .8em;

URI外的引號(hào)

原文 ▽

省略URI外的引號(hào)。

不要在 url() 里用 ( "" , '' ) 。

@import url(//www.google.com/css/go.css);

十六進(jìn)制

原文 ▽

十六進(jìn)制盡可能使用3個(gè)字符。

加顏色值時(shí)候會(huì)用到它，使用3個(gè)字符的十六進(jìn)制更短與簡(jiǎn)潔。

/* 不推薦 */
color: #eebbcc;

/* 推薦 */
color: #ebc;

前綴

原文 ▽

選擇器前面加上特殊應(yīng)用標(biāo)識(shí)的前綴（可選）。

大型項(xiàng)目中最好在ID或class名字前加上這種標(biāo)識(shí)性前綴（命名空間），使用短破折號(hào)鏈接。

使用命名空間可以防止命名沖突，方便維護(hù)，比如在搜索和替換操作上。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID和class命名的定界符

原文 ▽

ID和class名字有多單詞組合的用短破折號(hào)“-”分開(kāi)。

別在選擇器名字里用短破折號(hào)“-”以外的連接詞(包括啥也沒(méi)有)，以增進(jìn)對(duì)名字的理解和查找。

/* 不推薦：“demo”和“image”中間沒(méi)加“-” */
.demoimage {}

/* 不推薦：用下劃線“_”是屌絲的風(fēng)格 */
.error_status {}

/* 推薦 */
#video-id {}
.ads-sample {}

Hacks

原文 ▽

最好避免使用該死的CSS “hacks” —— 請(qǐng)先嘗試使用其他的解決方法。

雖然它很有誘惑力，可以當(dāng)作用戶代理檢測(cè)或特殊的CSS過(guò)濾器，但它的行為太過(guò)于頻繁，會(huì)長(zhǎng)期傷害項(xiàng)目的效率和代碼管理，所以能用其他的解決方案就找其他的。

CSS代碼格式規(guī)則

聲明順序

原文 ▽

依字母順序進(jìn)行聲明。

都按字母順序聲明，很容易記住和維護(hù)。

忽略瀏覽器的特定前綴排序，但多瀏覽器特定的某個(gè)CSS屬性前綴應(yīng)相對(duì)保持排序（例如-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)容縮進(jìn)

原文 ▽

縮進(jìn)所有代碼塊（“{}”之間）內(nèi)容。

縮進(jìn)所有代碼塊的內(nèi)容，它能夠提高層次結(jié)構(gòu)的清晰度。

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

聲明完結(jié)

原文 ▽

所有聲明都要用“;”結(jié)尾。

考慮到一致性和拓展性，請(qǐng)?jiān)诿總€(gè)聲明尾部都加上分號(hào)。

/* 不推薦 */
.test {
  display: block;
  height: 100px
}

/* 推薦 */
.test {
  display: block;
  height: 100px;
}

屬性名完結(jié)

原文 ▽

在屬性名冒號(hào)結(jié)束后加一個(gè)空字符。

出于一致性的原因，在屬性名和值之間加一個(gè)空格（可不是屬性名和冒號(hào)之間噢）。

/* 不推薦 */
h3 {
  font-weight:bold;
}

/* 推薦 */
h3 {
  font-weight: bold;
}

選擇器和聲明分行

原文 ▽

將選擇器和聲明隔行。

每個(gè)選擇器和聲明都要獨(dú)立新行。

/* 不推薦 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推薦 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

規(guī)則分行

原文 ▽

每個(gè)規(guī)則獨(dú)立一行。

兩個(gè)規(guī)則之間隔行。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSS元數(shù)據(jù)規(guī)則

注釋部分

原文 ▽

按組寫(xiě)注釋。（可選）

如果可以，按照功能的類別來(lái)對(duì)一組樣式表寫(xiě)統(tǒng)一注釋。獨(dú)立成行。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

吐槽部分

堅(jiān)持一致原則

如果你要編輯代碼，先花幾分鐘看看它的代碼風(fēng)格，如果它這么做，那你也應(yīng)該這么做。

風(fēng)格統(tǒng)一了，就有了一個(gè)共同思維的環(huán)境，參與者就可以專注的看你要說(shuō)什么，而不是先想你是在說(shuō)哪星球的語(yǔ)言。雖然我們?cè)谶@里提出統(tǒng)一樣式規(guī)則，但就只是想讓大家都知曉并借鑒而對(duì)自己的風(fēng)格進(jìn)行修正。當(dāng)然，保持自己獨(dú)有的風(fēng)格也是很重要的。balabala……

修正版本 2.1

譯者：chajn

新浪微博：@chajn

于 2012-04-28

那暗淡的夜晚

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： ksnail > 《前端》

舉報(bào)/認(rèn)領(lǐng)