基本原則
基本原則
結(jié)構(gòu)、樣式、行為分離
盡量確保文檔和模板只包含 HTML
結(jié)構(gòu),樣式都放到樣式表里,行為都放到腳本里。
縮進(jìn)
統(tǒng)一兩個(gè)空格縮進(jìn)(總之縮進(jìn)統(tǒng)一即可),不要使用 Tab
或者 Tab
、空格混搭。
文件編碼
使用不帶 BOM
的 UTF-8 編碼。
- 在 HTML中指定編碼
<meta charset="utf-8">
; - 無(wú)需使用
@charset
指定樣式表的編碼,它默認(rèn)為UTF-8
(參考 @charset);
一律使用小寫(xiě)字母
<!-- 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 成為相對(duì)地址,避免Mixed Content 問(wèn)題,減小文件字節(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)一注釋
通過(guò)配置編輯器,可以提供快捷鍵來(lái)輸出一致認(rèn)可的注釋模式。
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 注釋
- 單行注釋
必須獨(dú)占一行。//
后跟一個(gè)空格,縮進(jìn)與下一行被注釋說(shuō)明的代碼一致。
- 多行注釋
避免使用 /*...*/
這樣的多行注釋。有多行注釋內(nèi)容時(shí),使用多個(gè)單行注釋。
- 函數(shù)/方法注釋
- 函數(shù)/方法注釋必須包含函數(shù)說(shuō)明,有參數(shù)和返回值時(shí)必須使用注釋標(biāo)識(shí)。;
- 參數(shù)和返回值注釋必須包含類(lèi)型信息和說(shuō)明;
- 當(dāng)函數(shù)是內(nèi)部函數(shù),外部不可訪問(wèn)時(shí),可以使用 @inner 標(biāo)識(shí);
/** * 函數(shù)描述 * * @param {string} p1 參數(shù)1的說(shuō)明 * @param {string} p2 參數(shù)2的說(shuō)明,比較長(zhǎng) * 那就換行了. * @param {number=} p3 參數(shù)3的說(shuō)明(可選) * @return {Object} 返回值描述 */function foo(p1, p2, p3) { var p3 = p3 || 10; return { p1: p1, p2: p2, p3: p3 }; }
- 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個(gè)文件中包含哪些東西。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴(lài)關(guān)系和兼容性信息。如下:
/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */
代碼驗(yàn)證
- 使用 W3C HTML Validator 來(lái)驗(yàn)證你的HTML代碼有效性;
- 使用 W3C CSS Validator 來(lái)驗(yàn)證你的CSS代碼有效性;
代碼驗(yàn)證不是最終目的,真的目的在于讓開(kāi)發(fā)者在經(jīng)過(guò)多次的這種驗(yàn)證過(guò)程后,能夠深刻理解到怎樣的語(yǔ)法或?qū)懛ㄊ欠菢?biāo)準(zhǔn)和不推薦的,即使在某些場(chǎng)景下被迫要使用非標(biāo)準(zhǔn)寫(xiě)法,也可以做到心中有數(shù)。