基本原則
基本原則
結構、樣式、行為分離
盡量確保文件與範本只包含 HTML 結構，樣式都放到樣式表裡，行為都放到腳本裡。
縮排
統一兩個空格縮排（總之縮排統一即可），不要使用 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 協議部分
省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使URL 成為相對位址，避免Mixed Content 問題，減少檔案位元組數。
其它協定（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);
}統一註解
透過設定編輯器，可以提供快速鍵來輸出一致認可的註解模式。
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 來驗證你的HTML程式碼有效性；
- 使用 W3C CSS Validator來驗證你的CSS程式碼有效性；
程式碼驗證不是最終目的，真的目的在於讓開發者在經過多次的這種驗證過程後，能夠深刻地理解到怎樣的語法或寫法是非標準且不建議的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數。
