谷歌HTML/CSS規范

時間：2024-10-24 06:29:37 HTML

谷歌HTML/CSS規范

　　代碼規范的意義在于提供一個參照物。這里提供了一份全局的規范，但是你也得參照公司內部的規范，否則閱讀你代碼的人會很痛苦。這篇文章定義了 HTML 和 CSS 的格式和代碼規范，旨在提高代碼質量和協作效率。一起來看看谷歌HTML/CSS規范吧！

　　通用樣式規范

　　協議

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

　　/* Not recommended */

　　.example {

　　background: url("https://www.google.com/images/example");

　　}

　　/* Recommended */

　　.example {

　　background: url("//www.google.com/images/example");

　　}

　　通用格式規范

　　縮進

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

　　<ul>

　　<li>Fantastic

　　<li>Great

　　</ul>

　　.example {

　　color: blue;

　　}

　　大小寫

　　以下都應該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。

　　/* Not recommended */

　　color: #E5E5E5;

　　/* Recommended */

　　color: #e5e5e5;

　　結尾空格

　　結尾空格不僅多余，而且在比較代碼時會更麻煩。

　　<p>What?_

　　<p>Yes please.

　　通用元規范

　　編碼

　　在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認是 UTF-8。

　　注釋

　　使用注釋來解釋代碼：包含的模塊，功能以及優點。

　　任務項

　　用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。

　　<ul>

　　<li>Apples</li>

　　<li>Oranges</li>

　　</ul>

　　HTML風格規范

　　文檔類型

　　HTML 文檔應使用 HTML5 的文檔類型：<!DOCTYPE html>。

　　孤立標簽無需封閉自身，<br> 不要寫成 <br />。

　　HTML 正確性

　　盡可能使用正確的 HTML。

　　<article>This is only a test.

　　<!DOCTYPE html>

　　語義化

　　根據使用場景選擇正確的 HTML 元素（有時被錯誤的稱為“標簽”）。例如，使用 h1 元素創建標題，p 元素創建段落，a 元素創建鏈接等等。正確的使用 HTML 元素對于可訪問性、可重用性以及編碼效率都很重要。

　　<p onclick="goToRecommendations();">All recommendations</p>

　　<a href="recommendations/">All recommendations</a>

　　多媒體元素降級

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

　　關注分離

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

　　實體引用

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

　　The currency symbol for the Euro is “&eur;”.

　　The currency symbol for the Euro is “€”.

　　type 屬性

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

　　<link rel="stylesheet" href="//www.google.com/css/maia.css"

　　type="text/css">

　　<script src="//www.google.com/js/gweb/analytics/autotrack.js"

　　type="text/javascript"></script>

　　HTML格式規范

　　HTML 引號

　　屬性值用雙引號。

　　CSS風格規范

　　ID 和 Class 命名

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

　　/* Not recommended: meaningless */#yee-1901 {}/* Not recommended: presentational */

　　.button-green {}

　　.clear {}

　　/* Recommended: specific */#gallery {}#login {}.video {}

　　/* Recommended: generic */

　　.aux {}

　　.alt {}

　　ID 和 Class 命名風格

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

　　/* Not recommended */#navigation {}.atr {}

　　/* Recommended */#nav {}.author {}

　　選擇器

　　除非需要，否則不要在 id 或 class 前加元素名。

　　/* Not recommended */

　　ul#example {}p.error {}

　　/* Recommended */#example {}.error {}

　　屬性簡寫

　　盡量使用 CSS 中可以簡寫的屬性 (如 font)，可以提高編碼效率以及代碼可讀性。

　　/* Not recommended */

　　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;

　　/* Recommended */

　　border-top: 0;

　　font: 100%/1.6 palatino, georgia, serif;

　　padding: 0 1em 2em;

　　0 和單位

　　值為 0 時不用添加單位。

　　margin: 0;

　　padding: 0;

　　開頭的 0

　　值在 -1 和 1 之間時，不需要加 0。

　　font-size: .8em;

　　16進制表示法

　　/* Not recommended */

　　color: #eebbcc;

　　/* Recommended */

　　color: #ebc;

　　前綴

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

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

　　ID 和 Class 命名分隔符

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

　　/* Not recommended: does not separate the words “demo” and “image” */

　　.demoimage {}

　　/* Not recommended: uses underscore instead of hyphen */

　　.error_status {}

　　/* Recommended */#video-id {}.ads-sample {}

　　CSS格式規范

　　書寫順序

　　按照屬性首字母順序書寫 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;

　　塊級內容縮進

　　為了反映層級關系和提高可讀性，塊級內容都應縮進。

　　@media screen, projection {

　　html {

　　background: #fff;

　　color: #444;

　　}

　　聲明結束

　　每行 CSS 都應以分號結尾。

　　/* Not recommended */

　　.test {

　　display: block;

　　height: 100px

　　}

　　/* Recommended */

　　.test {

　　display: block;

　　height: 100px;

　　}

　　屬性名結尾

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

　　/* Not recommended */

　　h3 {

　　font-weight:bold;

　　}

　　/* Recommended */

　　h3 {

　　font-weight: bold;

　　}

　　聲明樣式塊的分隔

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

　　/* Not recommended: missing space */#video{

　　margin-top: 1em;

　　}

　　/* Not recommended: unnecessary line break */#video{

　　margin-top: 1em;

　　}

　　/* Recommended */#video {

　　margin-top: 1em;

　　}

　　選擇器分隔

　　每個選擇器都另起一行。

　　/* Not recommended */

　　a:focus, a:active {

　　position: relative; top: 1px;

　　}

　　/* Recommended */

　　h1,

　　h2,

　　h3 {

　　font-weight: normal;

　　line-height: 1.2;

　　}

　　規則分隔

　　規則之間都用空行隔開。

　　html {

　　background: #fff;}

　　body {

　　margin: auto;

　　width: 50%;

　　}

　　CSS 引號

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

　　/* Not recommended */@import url("//www.google.com/css/maia.css");html {

　　font-family: "open sans", arial, sans-serif;

　　}

　　/* Recommended */@import url(//www.google.com/css/maia.css);html {

　　font-family: 'open sans', arial, sans-serif;

　　}

　　CSS元規則

　　分段注釋

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

　　/* Header */#adw-header {}/* Footer */#adw-footer {}/* Gallery */

　　.adw-gallery {}

　　結語

　　堅持遵循代碼規范。

　　寫代碼前先看看周圍同事的代碼，然后決定代碼風格。

　　代碼規范的意義在于提供一個參照物。這里提供了一份全局的規范，但是你也得參照公司內部的規范，否則閱讀你代碼的人會很痛苦。

【谷歌HTML/CSS規范】相關文章：

Html/Css新手入門攻略01-23

網頁中HTML5與CSS3的應用07-21

CSS入門教程01-25

HTML的語言剖析10-13

過濾HTML代碼08-29

HTML5和HTML4有何區別？08-29