基本原則

結(jié)構(gòu)、樣式、行為分離

盡量確保文檔和模板只包含 HTML 結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里。

縮進(jìn)

統(tǒng)一兩個空格縮進(jìn)（總之縮進(jìn)統(tǒng)一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼

使用不帶 BOM 的 UTF-8 編碼。

在 HTML 中指定編碼<meta charset="utf-8">；
無需使用@charset 指定樣式表的編碼，它默認(rèn)為 UTF-8（參考 @charset）；

一律使用小寫字母

<!-- Recommended -->
<img src="google.png" alt="Google">

<!-- Not recommended -->
<A HREF="/">Home</A>
/* Recommended */
color: #e5e5e5;

/* Not recommended */
color: #E5E5E5;

省略外鏈資源 URL 協(xié)議部分

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協(xié)議，使 URL 成為相對地址，避免 Mixed Content 問題，減小文件字節(jié)數(shù)。

其它協(xié)議（ftp 等）的 URL 不省略。

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

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

統(tǒng)一注釋

通過配置編輯器，可以提供快捷鍵來輸出一致認(rèn)可的注釋模式。

HTML 注釋

模塊注釋

<!-- 文章列表列表模塊 -->
<div class="article-list">
...
</div>

區(qū)塊注釋

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

CSS 注釋

組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；

/* ==========================================================================
   組件塊
 ============================================================================ */

/* 子組件塊
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子組件塊
 ============================================================================ */
.selector-secondary {
  display: block; /* 注釋*/
}

.selector-three {
  display: span;
}

JavaScript 注釋

代碼驗證

使用 W3C HTML Validator 來驗證你的 HTML 代碼有效性；
使用 W3C CSS Validator 來驗證你的 CSS 代碼有效性；

代碼驗證不是最終目的，真的目的在于讓開發(fā)者在經(jīng)過多次的這種驗證過程后，能夠深刻理解到怎樣的語法或?qū)懛ㄊ欠菢?biāo)準(zhǔn)和不推薦的，即使在某些場景下被迫要使用非標(biāo)準(zhǔn)寫法，也可以做到心中有數(shù)。