1. 基本原則

基本原則

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

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

縮進

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

文件編碼

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

• 在 HTML中指定編碼 <meta charset="utf-8"> ；
• 無需使用 @charset 指定樣式表的編碼，它默認為 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://m.hgci.cn/statics/js/autotrack.js"></script>

<!-- Not recommended -->
<script src="http://m.hgci.cn/statics/js/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)一注釋

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

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 注釋

• 單行注釋

必須獨占一行。// 后跟一個空格，縮進與下一行被注釋說明的代碼一致。

• 多行注釋

避免使用 /*...*/ 這樣的多行注釋。有多行注釋內(nèi)容時，使用多個單行注釋。

• 函數(shù)/方法注釋
• 函數(shù)/方法注釋必須包含函數(shù)說明，有參數(shù)和返回值時必須使用注釋標(biāo)識。；
• 參數(shù)和返回值注釋必須包含類型信息和說明；
• 當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問時，可以使用 @inner 標(biāo)識；

/**
 * 函數(shù)描述
 *
 * @param {string} p1 參數(shù)1的說明
 * @param {string} p2 參數(shù)2的說明，比較長
 *     那就換行了.
 * @param {number=} p3 參數(shù)3的說明（可選）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

• 文件注釋

文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴關(guān)系和兼容性信息。如下:

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author user@meizu.com (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */

代碼驗證

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

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