Google HTML/CSS代碼風格指南

ksnail 2012-05-25

展開全文

Google HTML/CSS代碼風格指南

修正版本 2.1

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

全部展開/全部收起

背景

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

樣式規(guī)則

協(xié)議

原文 ▽

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

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

省略協(xié)議聲明，使URL成相對地址，防止內(nèi)容混淆問題和導致小文件重復下載。

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

縮進

原文 ▽

每次縮進兩個空格。

不要用TAB鍵或多個空格來進行縮進。

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

.example {
  color: blue;
}

大小寫

原文 ▽

只用小寫字母。

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

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

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

行尾空格

原文 ▽

刪除行尾白空格。

行尾空格沒必要存在。

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

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

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

編碼

原文 ▽

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

讓你的編輯器用沒有字節(jié)順序標記的UTF-8編碼格式進行編寫。

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

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

注釋

原文 ▽

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

用注釋來解釋代碼：它包括什么，它的目的是什么，它能做什么，為什么使用這個解決方案，還是說只是因為偏愛如此呢？

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

活動的條目

原文 ▽

用 TODO 標記代辦事項和正活動的條目

只用 TODO 來強調(diào)代辦事項，不要用其他的常見格式，例如 @@ 。

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

可在冒號之后附加活動條目說明等，例如 TODO: 活動條目說明 。

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

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

HTML代碼風格規(guī)則

文檔類型

原文 ▽

請使用HTML5標準。

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

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

HTML代碼有效性

原文 ▽

盡量使用有效的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>

語義

原文 ▽

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

使用元素 (有時候錯稱其為“標簽”) 要知道為什么去使用它們和是否正確。例如，用heading元素構造標題， p 元素構造段落, a 元素構造錨點等。

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

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

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

多媒體后備方案

原文 ▽

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

對于多媒體，如圖像，視頻，通過 canvas 讀取的動畫元素，確保提供備選方案。對于圖像使用有意義的備選文案（ alt ）對于視頻和音頻使用有效的副本和文案說明。

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

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

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

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

關注點分離

原文 ▽

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

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

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

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

將表現(xiàn)和行為分開維護是很重要滴，因為更改HTML文檔結構和模板會比更新樣式表和腳本更花費成本。

<!-- 不推薦 -->
<!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空格）。

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

<!-- 推薦 -->
歐元貨幣符號是 “€”。

可選標簽

原文 ▽

省略可選標簽（可選）。

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

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

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

原文 ▽

在樣式表和腳本的標簽中忽略 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>

HTML代碼格式規(guī)則

格式

原文 ▽

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

獨立元素的樣式（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代碼風格規(guī)則

CSS代碼有效性

原文 ▽

盡量使用有效的CSS代碼。

使用有效的CSS代碼，除非是處理CSS校驗器程序錯誤或者需要專有語法。

用類似W3C CSS validator 這樣的工具來進行有效性的測試。

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

ID和class的命名

原文 ▽

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

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

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

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

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

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

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

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

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

ID和class命名風格

原文 ▽

非必要的情況下，ID和class的名稱應盡量簡短。

簡要傳達ID或class是關于什么的。

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

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

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

類型選擇器

原文 ▽

避免使用CSS類型選擇器。

非必要的情況下不要使用元素標簽名和ID或class進行組合。

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

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

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

屬性縮寫

原文 ▽

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

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

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

/* 不推薦 */
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開頭的小數(shù)

原文 ▽

省略0開頭小數(shù)點前面的0。

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

font-size: .8em;

URI外的引號

原文 ▽

省略URI外的引號。

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

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

十六進制

原文 ▽

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

加顏色值時候會用到它，使用3個字符的十六進制更短與簡潔。

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

/* 推薦 */
color: #ebc;

前綴

原文 ▽

選擇器前面加上特殊應用標識的前綴（可選）。

大型項目中最好在ID或class名字前加上這種標識性前綴（命名空間），使用短破折號鏈接。

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

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

ID和class命名的定界符

原文 ▽

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

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

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

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

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

Hacks

原文 ▽

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

雖然它很有誘惑力，可以當作用戶代理檢測或特殊的CSS過濾器，但它的行為太過于頻繁，會長期傷害項目的效率和代碼管理，所以能用其他的解決方案就找其他的。

CSS代碼格式規(guī)則

聲明順序

原文 ▽

依字母順序進行聲明。

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

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

原文 ▽

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

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

@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;
}

規(guī)則分行

原文 ▽

每個規(guī)則獨立一行。

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

html {
  background: #fff;
}

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

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

注釋部分

原文 ▽

按組寫注釋。（可選）

如果可以，按照功能的類別來對一組樣式表寫統(tǒng)一注釋。獨立成行。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

吐槽部分

堅持一致原則

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

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

修正版本 2.1

譯者：chajn

新浪微博：@chajn

于 2012-04-28

那暗淡的夜晚

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