[TOC=2,3]
## 結構、樣式、行為分離
盡量確保文檔和模板只包含`HTML`結構，樣式都放到樣式表里，行為都放到腳本里。
## 縮進
統一**兩個空格**縮進（總之縮進統一既可），不要使用`Tab`或者`Tab`、空格混搭。
## 文件編碼
**使用不帶`BOM`的utf-8編碼**
* 在HTML中指定編碼 `<meta charset="utf-8">`;
* 無需使用`@charset`指定樣式的編碼，它默認為`UTF-8`（[參考@charset](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset)）
## 一律使用小寫字母
~~~
<!-- Recommended -->
<img src="google.png" alt="Google">
<!-- Not recommended -->
<A HREF="/">Home</A>
~~~
~~~
/* Recommended */
color: #e5e5e5;
/* Not recommended */
color: #E5E5E5;
~~~
## 省略外鏈資源 URL 協議部分
省略外鏈資源（圖片及其它媒體資源）URL 中的 `http` / `https` 協議，使 URL 成為相對地址，避免[Mixed Content](https://developer.mozilla.org/en-US/docs/Web/Security/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>
~~~
~~~
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
/* Not recommended */
.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(Aaaaaashu@gmail.com)
-->
~~~
## CSS 注釋
組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
~~~
/* ==========================================================================
組件塊
============================================================================ */
/* 子組件塊
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子組件塊
============================================================================ */
.selector-secondary {
display: block; /* 注釋*/
}
.selector-three {
display: span;
}
~~~
## JavaScript 注釋
* 單行注釋
必須獨占一行。// 后跟一個空格，縮進與下一行被注釋說明的代碼一致。
* 多行注釋
* 避免使用 /*...*/ 這樣的多行注釋。有多行注釋內容時，使用多個單行注釋。
* 函數/方法注釋
* 函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識。；
* 參數和返回值注釋必須包含類型信息和說明；
* 當函數是內部函數，外部不可訪問時，可以使用 @inner 標識；
~~~
/**
* 函數描述
*
* @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
};
}
~~~
* 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西。 應該提供文件的大體內容, 它的作者, 依賴關系和兼容性信息。如下:
~~~
/**
* @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](http://validator.w3.org/) 來驗證你的HTML代碼有效性；
* 使用[W3C CSS Validator](https://jigsaw.w3.org/css-validator/validator.html.zh-cn)來驗證你的CSS代碼有效性；
代碼驗證不是最終目的，真的目的在于讓開發者在經過多次的這種驗證過程后，能夠深刻理解到怎樣的語法或寫法是非標準和不推薦的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數。
