自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

[譯]谷歌 HTML/CSS 規(guī)范

作者：張宗正
開發(fā) 前端
這篇文章定義了 HTML 和 CSS 的格式和代碼規(guī)范，旨在提高代碼質(zhì)量和協(xié)作效率。

[[172592]]

背景

這篇文章定義了 HTML 和 CSS 的格式和代碼規(guī)范，旨在提高代碼質(zhì)量和協(xié)作效率。

通用樣式規(guī)范

協(xié)議

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

  1. <!-- Not recommended --> 
  2.  
  3. <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>  
  1. <!-- Recommended --> 
  2.  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>  
  1. /* Not recommended */ 
  2.  
  3. .example { 
  4.  
  5. background: url(https://www.google.com/images/example); 
  6.  
  7. }  
  1. /* Recommended */ 
  2.  
  3. .example { 
  4.  
  5. background: url(//www.google.com/images/example); 
  6.  
  7. }  

通用格式規(guī)范

縮進(jìn)

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

  1. <ul> 
  2.   <li>Fantastic 
  3.   <li>Great 
  4. </ul>  
  1. .example { 
  2.  
  3.     color: blue; 
  4.  
  5. }  

大小寫

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

  1. <!-- Not recommended --> 
  2. <A HREF="/">Home</A>  
  1. <!-- Recommended --> 
  2.  
  3. <img src="google.png" alt="Google">  
  1. /* Not recommended */ 
  2.  
  3. color: #E5E5E5;  
  1. /* Recommended */ 
  2.  
  3. color: #e5e5e5;  

結(jié)尾空格

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

  1. <!-- Not recommended --> 
  2.  
  3. <p>What?_  
  1. <!-- Recommended --> 
  2.  
  3. <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)記，像 @@。 

  1. <!-- TODO: remove optional tags --> 
  2. <ul> 
  3.   <li>Apples</li> 
  4.   <li>Oranges</li> 
  5. </ul>  

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

文檔類型

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

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

HTML 正確性

盡可能使用正確的 HTML。 

  1. <!-- Not recommended --> 
  2. <title>Test</title> 
  3. <article>This is only a test.  
  1. <!-- Recommended --> 
  2. <!DOCTYPE html> 
  3. <meta charset="utf-8"> 
  4. <title>Test</title> 
  5. <article>This is only a test.</article>  

語(yǔ)義化

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

  1. <!-- Not recommended --> 
  2. <div onclick="goToRecommendations();">All recommendations</div>  
  1. <!-- Recommended --> 
  2.  
  3. <a href="recommendations/">All recommendations</a>  

多媒體元素降級(jí)

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

  1. <!-- Not recommended --> 
  2.  
  3. <img src="spreadsheet.png">  
  1. <!-- Recommended --> 
  2.  
  3. <img src="spreadsheet.png" alt="Spreadsheet screenshot.">  

關(guān)注分離

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

實(shí)體引用

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

  1. <!-- Not recommended --> 
  2.  
  3. The currency symbol for the Euro is “&eur;”.  
  1. <!-- Recommended --> 
  2.  
  3. 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。 

  1. <!-- Not recommended --> 
  2.  
  3. <link rel="stylesheet" href="//www.google.com/css/maia.css" 
  4.  
  5. type="text/css">  
  1. <!-- Recommended --> 
  2. <link rel="stylesheet" href="//www.google.com/css/maia.css">  
  1. <!-- Not recommended --> 
  2.  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js" 
  4.  
  5. type="text/javascript"></script>  
  1. <!-- Recommended --> 
  2.  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>  

HTML 格式規(guī)范

HTML 引號(hào)

屬性值用雙引號(hào)。 

  1. <!-- Not recommended --> 
  2.  
  3. <a class='maia-button maia-button-secondary'>Sign in</a>  
  1. <!-- Recommended --> 
  2.  
  3. <a class="maia-button maia-button-secondary">Sign in</a>  

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

ID 和 Class 命名

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

  1. /* Not recommended: meaningless */ 
  2. #yee-1901 {} 
  3.  
  4. /* Not recommended: presentational */ 
  5. .button-green {} 
  6. .clear {}  
  1. /* Recommended: specific */ 
  2. #gallery {} 
  3. #login {} 
  4. .video {} 
  5.  
  6. /* Recommended: generic */ 
  7. .aux {} 
  8. .alt {}  

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

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

  1. /* Not recommended */ 
  2. #navigation {} 
  3. .atr {}  
  1. /* Recommended */ 
  2.  
  3. #nav {} 
  4.  
  5. .author {}  

選擇器

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

  1. /* Not recommended */ 
  2. ul#example {} 
  3. div.error {}  
  1. /* Recommended */ 
  2.  
  3. #example {} 
  4.  
  5. .error {}  

屬性簡(jiǎn)寫

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

  1. /* Not recommended */ 
  2. border-top-style: none; 
  3. font-family: palatino, georgia, serif; 
  4. font-size: 100%; 
  5. line-height: 1.6; 
  6. padding-bottom: 2em; 
  7. padding-left: 1em; 
  8. padding-right: 1em; 
  9. padding-top: 0;  
  1. /* Recommended */ 
  2. border-top: 0; 
  3. font: 100%/1.6 palatino, georgia, serif; 
  4. padding: 0 1em 2em;  

0 和單位

值為 0 時(shí)不用添加單位。 

  1. margin: 0; 
  2. padding: 0;  

開頭的 0

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

  1. font-size: .8em; 

16進(jìn)制表示法 

  1. /* Not recommended */ 
  2.  
  3. color: #eebbcc; 
  1. /* Recommended */  
  2.   
  3. color: #ebc;  

前綴

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

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

ID 和 Class 命名分隔符

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

  1. /* Not recommended: does not separate the words “demo” and “image” */ 
  2. .demoimage {} 
  3.  
  4. /* Not recommended: uses underscore instead of hyphen */ 
  5. .error_status {}  
  1. /* Recommended */ 
  2.  
  3. #video-id {} 
  4.  
  5. .ads-sample {}  

CSS 格式規(guī)范

書寫順序

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

  1. background: fuchsia; 
  2. border: 1px solid; 
  3. -moz-border-radius: 4px; 
  4. -webkit-border-radius: 4px; 
  5. border-radius: 4px; 
  6. color: black; 
  7. text-align: center; 
  8. text-indent: 2em;  

塊級(jí)內(nèi)容縮進(jìn)

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

  1. @media screen, projection { 
  2.  
  3.   html { 
  4.     background: #fff; 
  5.     color: #444; 
  6.   } 
  7.  
  8. }  

聲明結(jié)束

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

  1. /* Not recommended */ 
  2.  
  3. .test { 
  4.  
  5. display: block; 
  6.  
  7. height: 100px 
  8.  
  9. }  
  1. /* Recommended */ 
  2.  
  3. .test { 
  4.  
  5. display: block; 
  6.  
  7. height: 100px; 
  8.  
  9. } 

 屬性名結(jié)尾

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

  1. /* Not recommended */ 
  2.  
  3. h3 { 
  4.  
  5. font-weight:bold; 
  6.  
  7. }  
  1. /* Recommended */ 
  2.  
  3. h3 { 
  4.  
  5. font-weight: bold; 
  6.  
  7. }  

聲明樣式塊的分隔

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

  1. /* Not recommended: missing space */ 
  2. #video{ 
  3.   margin-top: 1em; 
  4. } 
  5.  
  6. /* Not recommended: unnecessary line break */ 
  7. #video 
  8. { 
  9.   margin-top: 1em; 
  10. }  
  1. /* Recommended */ 
  2.  
  3. #video { 
  4.  
  5. margin-top: 1em; 
  6.  
  7. }  

選擇器分隔

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

  1. /* Not recommended */ 
  2.  
  3. a:focus, a:active { 
  4.  
  5. position: relative; top: 1px; 
  6.  
  7. }  
  1. /* Recommended */ 
  2.  
  3. h1, 
  4.  
  5. h2, 
  6.  
  7. h3 { 
  8.  
  9. font-weight: normal; 
  10.  
  11. line-height: 1.2; 
  12.  
  13. }  

規(guī)則分隔

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

  1. html { 
  2.   background: #fff; 
  3. } 
  4.  
  5. body { 
  6.   margin: auto; 
  7.   width: 50%; 
  8. }  

CSS 引號(hào)

屬性選擇器和屬性值用單引號(hào)，URI 的值不需要引號(hào)。

  1. /* Not recommended */ 
  2.  
  3. @import url("//www.google.com/css/maia.css"); 
  4.  
  5. html { 
  6.  
  7. font-family: "open sans", arial, sans-serif; 
  8.  
  9. }  
  1. /* Recommended */ 
  2.  
  3. @import url(//www.google.com/css/maia.css); 
  4.  
  5. html { 
  6.  
  7. font-family: 'open sans', arial, sans-serif; 
  8.  
  9. }  

CSS 元規(guī)則

分段注釋

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

  1. /* Header */ 
  2.  
  3. #adw-header {} 
  4.  
  5. /* Footer */ 
  6.  
  7. #adw-footer {} 
  8.  
  9. /* Gallery */ 
  10.  
  11. .adw-gallery {}  

結(jié)語(yǔ)

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

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

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

責(zé)任編輯：龐桂玉 來源： segmentfault
HTMLCSSWeb
相關(guān)推薦

2020-04-16 21:02:35

前端命名規(guī)范html規(guī)范

2015-03-18 09:34:47

程序員編碼規(guī)范

2017-07-20 11:11:39

前端CSS書寫規(guī)范

2010-08-31 13:32:12

CSS

2022-12-28 08:16:30

CSS新規(guī)范樣式

2010-08-31 11:25:15

2010-09-01 09:59:32

CSS

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2010-09-01 10:17:38

CSShack注釋

2009-06-23 09:25:01

谷歌人才流失

2010-08-16 14:07:44

盒模型marginpadding

2014-03-17 09:34:01

HTMLHTML閉合

2010-09-13 09:35:28

DIVCSS

2013-09-16 10:19:08

htmlcssJavaScript

2010-08-27 15:16:26

htmlbodyCSS

2014-08-07 10:13:43

谷歌Material De設(shè)計(jì)規(guī)范

2014-08-28 11:12:14

谷歌

2010-09-07 15:53:02

CSS規(guī)范化

2014-06-17 12:50:04

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)