一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

google提供的的html/css規(guī)范指南

 悟靜 2012-12-04

google之前出了javascript規(guī)范指南，中文翻譯傳送門在此，現(xiàn)在有了html/css規(guī)范指南，明河開始翻譯時版本是2.1。后續(xù)如果google有新的內(nèi)容補充，明河也會跟進。

常規(guī)樣式規(guī)則

協(xié)議

引入的assets資源文件（js、css、圖片文件）忽略協(xié)議（http:, https:），比如：
不推薦的寫法：

<scriptsrc="

推薦的寫法：

<scriptsrc="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

不推薦的寫法：

.example {
}

推薦的寫法：

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

關(guān)于google的這點建議，明河倒是覺得有待商榷，有興趣的朋友看http:///questions/4831741/can-i-change-all-my-http-links-to-just，里面有詳細的討論，根據(jù)一位網(wǎng)友的測試，相對url在IE7、IE8下存在二次加載的問題。

常規(guī)格式規(guī)則

縮進

使用二個空格縮進（PS：明河一般使用四個空格縮進-_-!）

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


大寫

只使用小寫。
所有的代碼只使用小寫字母（PS:淘寶的做法是如果跟js的DOM操作相關(guān)，作為鉤子使用J_Trigger類似的方式）：包括元素名稱、樣式名、屬性名（除了text/CDATA）。
不推薦的寫法：

1 <A HREF="/">Home</A>

推薦的寫法：

1 <img src="google.png"alt="Google">


尾部空白

刪掉冗余的行尾空格。
不推薦的寫法：

What?_

推薦的寫法：

Yes please.

常規(guī)Meta規(guī)則

編碼

使用utf-8編碼。
指定頁面的文檔編碼為utf-8

<metacharset="utf-8">

不需要特別指定樣式引用的編碼為utf-8。
（ps：關(guān)于html編碼指定方面的內(nèi)容，可以看《 Character Sets & Encodings in XHTML, HTML and CSS》）

注釋

如果可能，注釋還是必不可少的。
使用注釋說明下代碼：它包括了什么，它的目的是什么，為什么優(yōu)先使用它。

行動項目

（ps：推薦使用）
google建議養(yǎng)成寫TODO的習(xí)慣，特別是在項目中，記錄下一些要改，但來不及修改的地方，或指派其他同事做修改。
高亮TODO，不同的編輯器有不一樣的方式，比如idea是TODO:

1 {# TODO(john.doe): revisit centering #}
2 <center>Test</center>
1 <!-- TODO: remove optional tags -->
2 <ul>
3 <li>Apples</li>
4 <li>Oranges</li>
5 </ul>


常規(guī)html設(shè)計規(guī)則

文檔類型

使用html5文檔聲明：

1 <!DOCTYPE html>


不再使用XHTML（ application/xhtml+xml）。

HTML 的正確性

可以使用一些工具，檢驗?zāi)鉮tml的正確性，比如 W3C HTML validator。
不推薦的寫法：

1 <article>This is only a test.
2 </article>

推薦的寫法：

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


HTML 的語義性

使用富含語義性的標簽（ps:建議掌握html5新增的部分語義標簽）。
google特別指出了要確保html的可用性，看下面的代碼
不推薦的寫法：

<divonclick="goToRecommendations();">All recommendations</div>

推薦的寫法：

1 <ahref="recommendations/">All recommendations</a>


多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。
不推薦的寫法：

<img src="spreadsheet.png">

推薦的寫法：

1 <img src="spreadsheet.png"alt="Spreadsheet screenshot.">
html、css、javascript三層分離

盡可能保持結(jié)構(gòu)（html結(jié)構(gòu)標簽）、描述（css）、行為（javascript）的分離，并且讓他們盡可能少的交互。確保html文檔內(nèi)容只有html的結(jié)構(gòu)，將css和javascript以資源的方式引入。
不推薦的寫法：

01 <!DOCTYPE html>
02 <title>HTML sucks</title>
03 <link rel="stylesheet" href="base.css" media="screen">
04 <link rel="stylesheet" href="grid.css" media="screen">
05 <link rel="stylesheet" href="print.css" media="print">
06 <h1 style="font-size: 1em;">HTML sucks</h1>
07 <p>I’ve read about this on a few sites but now I’m sure:
08   <u>HTML is stupid!!1</u>
09 <center>I can’t believe there’s no way to control the styling of
10   my website without doing everything all over again!</center>



推薦的寫法：

1 <!DOCTYPE html>
2 <title>My first CSS-only redesign</title>
3 <link rel="stylesheet" href="default.css">
4 <h1>My first CSS-only redesign</h1>
5 <p>I’ve read about this on a few sites but today I’m actually
6   doing it: separating concerns and avoiding anything in the HTML of
7   my website that is presentational.
8 <p>It’s awesome!


實體引用

在html頁面中避免使用實體引用。
如果你的文件是utf-8編碼，就不需要使用像 —, ”, or ?的實體引用。
不推薦的寫法：

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

推薦的寫法：

The currency symbol for the Euro is “€”.
可選的標簽

忽略一些可選的標簽，比如
不推薦的寫法：

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>Spending money, spending bytes</title>
5   </head>
6   <body>
7     <p>Sic.</p>
8   </body>
9 </html>


推薦的寫法：

1 <!DOCTYPE html>
2 <title>Saving money, saving bytes</title>
3 <p>Qed.


html5的文檔，可以忽略head、body標簽。
所有可忽略的標簽，可以看《 HTML5 specification 》，

type屬性

樣式和腳本引用可以忽略type屬性。
不推薦的寫法：

1 <link rel="stylesheet"href="http://www.google.com/css/maia.css"type="text/css">

推薦的寫法：

1 <link rel="stylesheet"href="http://www.google.com/css/maia.css">


不推薦的寫法：

1 <script src="http://www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>

推薦的寫法：

1 <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>


html格式規(guī)則

常規(guī)格式

每一塊、每一列表、每一表格元素都需要另起一行，并縮進每個子元素。

01 <blockquote>
02   <p><em>Space</em>, the final frontier.</p>
03 </blockquote>
04 <ul>
05   <li>Moe
06   <li>Larry
07   <li>Curly
08 </ul>
09 <table>
10   <thead>
11     <tr>
12       <th scope="col">Income</th>
13       <th scope="col">Taxes</th>
14   <tbody>
15     <tr>
16       <td>$ 5.00</td>
17       <td>$ 4.50</td>
18 </table>


css樣式規(guī)則

css驗證

盡可能驗證css的合法性，可以使用 W3C CSS validator。

id和class名

使用富有含義和通用的id和class名。
(ps：明河經(jīng)常聽周圍的同事感慨，取好名字，也是個學(xué)問，有時候有些命名會讓你很糾結(jié)，但好的命名的確可以提高可讀性和可維護性。)
使用功能性和通用性的命名方式減少文檔或模板的不必要的改動。
不推薦的寫法：

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的命名在保持語義性的同時盡可能的短。
不推薦的寫法：

1 #navigation {}
2 .atr {}

推薦的寫法：

1 #nav {}
2 .author {}

可以縮寫單詞，但縮寫后務(wù)必能讓人明白其含義。比如author縮寫成atr就非常費解。

選擇器

避免出現(xiàn)多余的祖先選擇器。（存在性能上的差異問題，可以看 performance reasons）
避免出現(xiàn)元素標簽名作為選擇器的一部分。
不推薦的寫法：

1 ul#example {}
2 div.error {}

推薦的寫法：

1 #example {}
2 .error {}
簡化css屬性寫法

不推薦的寫法：

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


推薦的寫法：

1 border-top: 0;
2 font: 100%/1.6palatino, georgia, serif;
3 padding: 01em2em;


使用簡潔的屬性寫法有利于提高可讀性和解析效率。

0和單位

屬性值為0時，忽略單位。

1 margin: 0;
2 padding: 0;
屬性值出現(xiàn)小數(shù)點忽略0
1 font-size: .8em;
url的引用

使用url()時忽略刮號中的”"。

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

16進制符號

不推薦的寫法：

1 color: #eebbcc;


推薦的寫法：

1 color: #ebc;


前綴

給選擇器樣式名增加前綴（可選）。
在大的項目（多人協(xié)作）中使用前綴可以減少樣式?jīng)_突，同時可以明確選擇器歸屬含義。

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


（PS:一般明河使用前綴來定位樣式的歸屬，比如.nav-item，表明是nav導(dǎo)航下的子元素樣式。）

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 #video-id {}
2 .ads-sample {}
Hacks

盡可能地避免使用hack的方式解決瀏覽器樣式兼容性問題。
（ps：明河覺得這個很難，畢竟IE橫在那里。）
盡量避免使用CSS filters。

css格式規(guī)則

css屬性按字母順序書寫

（PS：排序忽略瀏覽器前綴，比如-moz-，-webkit-）

1 background: fuchsia;
2 border: 1pxsolid;
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;


塊內(nèi)容縮進
1 @media screen, projection{
2     
3   html {
4     background: #fff;
5     color: #444;
6   }
7     
8 }


縮進所有的塊狀內(nèi)容。

不可缺少的;

不推薦的寫法：

1 .test {
2   display: block;
3   height: 100px
4 }


推薦的寫法：

1 .test {
2   display: block;
3   height: 100px;
4 }


屬性值前增加個空格

不推薦的寫法：

1 h3{
2   font-weight:bold;
3 }


推薦的寫法：

1 h3{
2   font-weight: bold;
3 }


分隔選擇器

不推薦的寫法：

1 a:focus, a:active {
2   position: relative; top: 1px;
3 }


推薦的寫法：

1 h1,
2 h2,
3 h3{
4   font-weight: normal;
5   line-height: 1.2;
6 }


1行只有一個css屬性，二個規(guī)則間有一個空行
1 html {
2   background: #fff;
3 }
4     
5 body {
6   margin: auto;
7   width: 50%;
8 }

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

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产午夜精品亚洲精品国产| 午夜精品一区二区av| 亚洲第一区欧美日韩在线| 久久大香蕉精品在线观看| 久久大香蕉精品在线观看| 色哟哟在线免费一区二区三区| 精品国产成人av一区二区三区| 亚洲一区二区欧美激情| 午夜视频在线观看日韩| 插进她的身体里在线观看骚| 国内欲色一区二区三区| 69老司机精品视频在线观看| 免费播放一区二区三区四区| 国产级别精品一区二区视频| 亚洲精品偷拍视频免费观看| 国产亚洲欧美另类久久久| 91国内视频一区二区三区| 亚洲中文字幕三区四区| 隔壁的日本人妻中文字幕版 | 欧美熟妇喷浆一区二区| 国产无摭挡又爽又色又刺激| 久久少妇诱惑免费视频| 女同伦理国产精品久久久| 91亚洲精品国产一区| 91插插插外国一区二区| 神马午夜福利一区二区| 国产精品二区三区免费播放心| 日韩成人中文字幕在线一区| 免费在线成人午夜视频| 久久碰国产一区二区三区| 男女激情视频在线免费观看| 亚洲精品国产美女久久久99| 日韩亚洲精品国产第二页| 亚洲精品国产精品日韩| av在线免费观看在线免费观看| 午夜精品国产一区在线观看| 中文字幕日韩欧美理伦片| 国产精品午夜视频免费观看| 欧美熟妇喷浆一区二区| 东京热一二三区在线免| 国产精品十八禁亚洲黄污免费观看|