谷歌HTML/CSS規(guī)范

時(shí)間：2024-10-24 06:29:37 HTML 我要投稿

相關(guān)推薦

谷歌HTML/CSS規(guī)范

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

　　通用樣式規(guī)范

　　協(xié)議

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

　　/* Not recommended */

　　.example {

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

　　}

　　/* Recommended */

　　.example {

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

　　}

　　通用格式規(guī)范

　　縮進(jìn)

　　一次縮進(jìn)2個(gè)空格，不要使用 tab 或者混合 tab 和空格的縮進(jìn)。

　　<ul>

　　<li>Fantastic

　　<li>Great

　　</ul>

　　.example {

　　color: blue;

　　}

　　大小寫

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

　　/* Not recommended */

　　color: #E5E5E5;

　　/* Recommended */

　　color: #e5e5e5;

　　結(jié)尾空格

　　結(jié)尾空格不僅多余，而且在比較代碼時(shí)會更麻煩。

　　<p>What?_

　　<p>Yes please.

　　通用元規(guī)范

　　編碼

　　在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因?yàn)槟J(rèn)是 UTF-8。

　　注釋

　　使用注釋來解釋代碼：包含的模塊，功能以及優(yōu)點(diǎn)。

　　任務(wù)項(xiàng)

　　用 TODO 來標(biāo)記待辦事項(xiàng)，而不是用一些其他的標(biāo)記，像 @@。

　　<ul>

　　<li>Apples</li>

　　<li>Oranges</li>

　　</ul>

　　HTML風(fēng)格規(guī)范

　　文檔類型

　　HTML 文檔應(yīng)使用 HTML5 的文檔類型：<!DOCTYPE html>。

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

　　HTML 正確性

　　盡可能使用正確的 HTML。

　　<article>This is only a test.

　　<!DOCTYPE html>

　　語義化

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

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

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

　　多媒體元素降級

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

　　關(guān)注分離

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

　　實(shí)體引用

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

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

　　The currency symbol for the Euro is “€”.

　　type 屬性

　　在引用樣式表和腳本時(shí)，不要指定 type 屬性，除非不是 CSS 或 JavaScript。因?yàn)?HTML5 中已經(jīng)默認(rèn)指定樣式變的 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格式規(guī)范

　　HTML 引號

　　屬性值用雙引號。

　　CSS風(fēng)格規(guī)范

　　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 命名風(fēng)格

　　id 和 class 應(yīng)該盡量簡短，同時(shí)要容易理解。

　　/* 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 時(shí)不用添加單位。

　　margin: 0;

　　padding: 0;

　　開頭的 0

　　值在 -1 和 1 之間時(shí)，不需要加 0。

　　font-size: .8em;

　　16進(jìn)制表示法

　　/* Not recommended */

　　color: #eebbcc;

　　/* Recommended */

　　color: #ebc;

　　前綴

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

　　.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格式規(guī)范

　　書寫順序

　　按照屬性首字母順序書寫 CSS 易于閱讀和維護(hù)，排序時(shí)忽略帶有瀏覽器前綴的屬性。

　　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)

　　為了反映層級關(guān)系和提高可讀性，塊級內(nèi)容都應(yīng)縮進(jìn)。

　　@media screen, projection {

　　html {

　　background: #fff;

　　color: #444;

　　}

　　聲明結(jié)束

　　每行 CSS 都應(yīng)以分號結(jié)尾。

　　/* Not recommended */

　　.test {

　　display: block;

　　height: 100px

　　}

　　/* Recommended */

　　.test {

　　display: block;

　　height: 100px;

　　}

　　屬性名結(jié)尾

　　屬性名和值之間都應(yīng)有一個(gè)空格。

　　/* 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;

　　}

　　選擇器分隔

　　每個(gè)選擇器都另起一行。

　　/* Not recommended */

　　a:focus, a:active {

　　position: relative; top: 1px;

　　}

　　/* Recommended */

　　h1,

　　h2,

　　h3 {

　　font-weight: normal;

　　line-height: 1.2;

　　}

　　規(guī)則分隔

　　規(guī)則之間都用空行隔開。

　　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元規(guī)則

　　分段注釋

　　用注釋把 CSS 分成各個(gè)部分。

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

　　.adw-gallery {}

　　結(jié)語

　　堅(jiān)持遵循代碼規(guī)范。

　　寫代碼前先看看周圍同事的代碼，然后決定代碼風(fēng)格。

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

【谷歌HTML/CSS規(guī)范】相關(guān)文章：

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

網(wǎng)頁中HTML5與CSS3的應(yīng)用07-21

關(guān)于網(wǎng)站制作css書寫規(guī)范02-26

CSS最核心的概念03-10

css屬性定位教程07-23

CSS入門教程01-25

分析谷歌的seo技巧09-06

HTML的語言剖析10-13

過濾HTML代碼08-29

HTML5和HTML4有何區(qū)別？08-29