# 基本原則
## 結構、樣式、行為分離
盡量確保文檔和模板只包含?`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/Security/MixedContent)?問題，減小文件字節數。
**其它協議（`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](http://jigsaw.w3.org/css-validator/validator.html.zh-cn)?來驗證你的CSS代碼有效性；
代碼驗證不是最終目的，真的目的在于讓開發者在經過多次的這種驗證過程后，能夠深刻理解到怎樣的語法或寫法是非標準和不推薦的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數。
