慢慢積累
通用樣式規范
省略圖片、樣式、腳本以及其他媒體文件 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"); }
縮進
一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。
HTML和CSS都一樣。
大小寫
以下都應該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。
結尾空格
<!-- 不推薦 --> <p>What?_ <!-- 推薦 --> <p>Yes please.
通用元規范
編碼
在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認是 UTF-8。
注釋
使用注釋來解釋代碼：包含的模塊，功能以及優點。
任務項
用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
文檔類型
HTML 文檔應使用 HTML5 的文檔類型：<!DOCTYPE html>。
孤立標簽無需封閉自身，<br> 不要寫成 <br />。
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>
多媒體元素降級
對於像圖片、視頻、canvas 動畫等多媒體元素，確保提供其他可訪問的內容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。
<!-- 不推薦 --> <img src="spreadsheet.png"> <!-- 推薦 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
關注分離
標記、樣式和腳本分離，確保相互耦合最小化。
實體引用
如果團隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，☺，除了一些在 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"> <!-- 推薦 --> <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>
HTML 引號
屬性值用雙引號。
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
20170311
項目結構
項目命名規范
項目：用項目對應的英文單詞命名
文件及文件夾:
-
全部英文小寫字母，可以使用中線，不可出現其他字符，如login,my-order
-
調用 `/lib`里面的文件需包含版本號，壓縮文件需包含`min`關鍵詞，其他插件則可不包含，如：`/lib/jquery.1.9.1.js`
格式&編碼
-
文本文件： `.xxx` UTF-8_\(無BOM\)_ 編碼
-
圖片文件： `.png` _(PNG-24)_ `.jpg` _(壓縮率8-12)_
-
動態圖片： `.gif`
-
壓縮文件： `.tar.gz` `.zip``.rar`
標簽使用規范
盡量減少標簽層級
雙標簽必須閉合，單標簽用斜線閉合
HTML第一行統一使用HTML5標准<!DOCTYPE html>
一律統一標簽結尾斜杠的書寫形式：`<br />` `<hr />` 注意之間空格
避免使用已過時標簽，如：`<font>` `<frame>` `<s>`
`<img>`標簽默認缺省格式：`<img src="#" alt="缺省時文字" />`
`<a>`標簽缺省格式：`<a href="#" title="鏈接名稱">xxx</>` 注：`target="_blank"` 根據需求決定
style、link、script可省略type屬性，因為 text/css 和 text/javascript 分別是他們的默認值
HTML注釋
<!--內容-->
<div class="content"> <p>content</p>
</div>
注意事項
手機端的自適應布局盡量采用彈性布局，而不是百分比
`css`文件都 置於頭部
HTML換行縮進：采用 tab空格
其他效果`js`及`統計代碼` 文件置於尾部
手機端的頁面都按750px來做，顯示效果按375px
圖片規范
圖片大小：切圖時使用web格式保存，減小圖片大小
圖片尺寸：一律采用整數，如20X20，50X50
圖片合並：小圖片一律要合並，並保存對應的psd文件，以便后期修改