基本原則

結構、樣式、行為分離

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

縮排

統一兩個空格縮排（總之縮排統一即可），不要使用 Tab 或者 Tab、空格混搭。

檔案編碼

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

在 HTML中指定編碼 ；

無需使用 @charset 指定樣式表的編碼，它預設為 UTF-8 （參考 @charset）；

一律使用小寫字母

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

<!-- Not recommended -->
 

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

color: #e5e5e5;


color: #E5E5E5;

省略外鏈資源 URL 協議部分

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免 Mixed Content 問題，減小檔案位元組數。

其它協議（ftp 等）的 URL 不省略。

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


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

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


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

統一註釋

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

HTML 註釋

模組註釋

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

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu([email protected])
-->

CSS 註釋

元件塊和子元件塊以及宣告塊之間使用一空行分隔，子元件塊之間三空行分隔；

.selector {
  padding: 15px;
  margin-bottom: 15px;
}




.selector-secondary {
  display: block; 
}

.selector-three {
  display: span;
}
JavaScript 註釋
``
##單行註釋
##必須獨佔一行。// 後跟一個空格，縮排與下一行被註釋說明的程式碼一致。

##多行註釋
###避免使用 這樣的多行註釋。有多行註釋內容時，使用多個單行註釋。

###函式/方法註釋
###函式/方法註釋必須包含函式說明，有引數和返回值時必須使用註釋標識。；
###引數和返回值註釋必須包含型別資訊和說明；
###當函式是內部函式，外部不可訪問時，可以使用 @inner 標識；
```javascript
/**
* 函式描述
*
* @param {string} p1 引數1的說明
* @param {string} p2 引數2的說明，比較長
*     那就換行了.
* @param {number=} p3 引數3的說明（可選）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}




<div class="se-preview-section-delimiter"></div>

檔案註釋

檔案註釋用於告訴不熟悉這段程式碼的讀者這個檔案中包含哪些東西。 應該提供檔案的大體內容, 它的作者, 依賴關係和相容性資訊。如下:

/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author [email protected] (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/

程式碼驗證

使用 W3C HTML Validator 來驗證你的HTML程式碼有效性；

使用 W3C CSS Validator 來驗證你的CSS程式碼有效性；

程式碼驗證不是最終目的，真的目的在於讓開發者在經過多次的這種驗證過程後，能夠深刻理解到怎樣的語法或寫法是非標準和不推薦的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數。