歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Google HTML/CSS 編寫格式規范

Google HTML/CSS 規范

本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規范,以建立良好的個人編碼習慣。

1、通用樣式規范

省略圖片、樣式、腳本以及其他媒體文件 URL 的協議部分(http:,https:),除非文件在兩種協議下都不可用。這種方案稱為 protocol-relative URL,好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面,浏覽器都會以相同的協議請求頁面中的資源,同時可以節省一部分字節。

<!-- 不推薦 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推薦 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推薦 */
.example {
  background: url("https://www.google.com/images/example");
}
/* 推薦 */
.example {
  background: url("//www.google.com/images/example");
}

1.1 縮進

一次縮進2個空格,不要使用 tab 或者混合 tab 和空格的縮進。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

1.2 大小寫

以下都應該用小寫:HTML 元素名稱,屬性,屬性值(除非 text/CDATA),CSS 選擇器,屬性,屬性值。

<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png" alt="Google">
/* 不推薦 */
color: #E5E5E5;
/* 推薦 */
color: #e5e5e5;
結尾空格
<!-- 不推薦 -->
<p>What?_
<!-- 推薦 -->
<p>Yes please.

1.3 編碼

在 HTML 中通過 指定編碼方式,CSS 中不需要指定,因為默認是 UTF-8。
注釋
使用注釋來解釋代碼:包含的模塊,功能以及優點。
任務項
用 TODO 來標記待辦事項,而不是用一些其他的標記,像 @@。

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

2、HTML 風格規范

2.1 文檔類型

HTML 文檔應使用 HTML5 的文檔類型:。

孤立標簽無需封閉自身,

HTML 正確性 盡可能使用正確的 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>
語義化
<!-- 不推薦 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 -->
<a href="recommendations/">All recommendations</a>

2.2 多媒體元素降級

對於像圖片、視頻、canvas 動畫等多媒體元素,確保提供其他可訪問的內容。圖片可以使用替代文本(alt),視頻和音頻可以使用文字版本。

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

2.3 關注分離

標記、樣式和腳本分離,確保相互耦合最小化。

2.4 實體引用

如果團隊中文件和編輯器使用同樣的編碼方式,就沒必要使用實體引用,如 —, ”,☺,除了一些在 HTML 中有特殊含義的字符(如 < 和 &)以及不可見的字符(如空格)。

<!-- 不推薦 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推薦 -->
The currency symbol for the Euro is “€”.

2.5 type 屬性

在引用樣式表和腳本時,不要指定 type 屬性,除非不是 CSS 或 JavaScript。
因為 HTML5 中已經默認指定樣式變的 type 是 text/css,腳本的type 是 text/javascript。

<!-- 不推薦 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">
<!-- 推薦 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推薦 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>
<!-- 推薦 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

3、HTML 格式規范

HTML 引號 屬性值用雙引號。

<!-- 不推薦 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推薦 -->
<a class="maia-button maia-button-secondary">Sign in</a>

4、CSS 風格規范

4.1 ID 和 Class 命名

使用有含義的 id 和 class 名稱。

/* 不推薦: 含義不明確 */
#yee-1901 {}

/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}

4.2 ID 和 Class 命名風格

id 和 class 應該盡量簡短,同時要容易理解。

/* 不推薦 */
#navigation {}
.atr {}
/* 推薦 */
#nav {}
.author {}
選擇器
除非需要,否則不要在 id 或 class 前加元素名。
/* 不推薦 */
ul#example {}
div.error {}
/* 推薦 */
#example {}
.error {}

4.3 屬性簡寫

盡量使用 CSS 中可以簡寫的屬性 (如 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;

4.4 0和單位

值為 0 時不用添加單位。
margin: 0;
padding: 0;
開頭的 0
值在 -1 和 1 之間時,不需要加 0。
font-size: .8em;

4.5 16進制表示法

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

4.6 前綴

使用帶前綴的命名空間可以防止命名沖突,同時提高代碼可維護性。

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

4.7 ID 和 Class 命名分隔符

選擇器中使用連字符可以提高可讀性。

/* 不推薦:  “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}

/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}

5、CSS 格式規范

5.1 書寫順序

按照屬性首字母順序書寫 CSS 易於閱讀和維護,排序時忽略帶有浏覽器前綴的屬性。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

5.2 塊級內容縮進

為了反映層級關系和提高可讀性,塊級內容都應縮進。
@media screen, projection {

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

}

5.3 聲明結束

每行 CSS 都應以分號結尾。

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

5.3 屬性名結尾

屬性名和值之間都應有一個空格。

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

5.4 聲明樣式塊的分隔

在選擇器和 {} 之間用空格隔開。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* 推薦 */
#video {
  margin-top: 1em;
}

5.5 選擇器分隔

每個選擇器都另起一行。

/* 不推薦 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

5.6 規則分隔

規則之間都用空行隔開。

html {
  background: #fff;
}

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

5.6 CSS 引號

屬性選擇器和屬性值用單引號,URI 的值不需要引號。

/* 不推薦 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

5.7 CSS 元規則

分段注釋:用注釋把 CSS 分成各個部分。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Copyright © Linux教程網 All Rights Reserved