基本原則

結構、樣式、行為分離

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

縮進

統(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="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.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 注釋

• 單行注釋

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

• 多行注釋

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

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

/**
 * 函數(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
    };
}

• 文件注釋

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

/**
 * @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)過多次的這種驗證過程后，能夠深刻理解到怎樣的語法或寫法是非標準和不推薦的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數(shù)。