盡量確保文檔和模板只包含 HTML
結構,樣式都放到樣式表里,行為都放到腳本里。
統(tǒng)一兩個空格縮進(總之縮進統(tǒng)一即可),不要使用 Tab 或者 Tab、空格混搭。
使用不帶 BOM
的 UTF-8 編碼。
<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 中的 http
/ https
協(xié)議,使 URL 成為相對地址,避免 Mixed Content 問題,減小文件字節(jié)數(shù)。
其它協(xié)議(ftp
等)的 URL 不省略。
<!-- Recommended -->
<script src="http://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);
}
通過配置編輯器,可以提供快捷鍵來輸出一致認可的注釋模式。
<!-- 文章列表列表模塊 -->
<div class="article-list">
...
</div>
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
組件塊和子組件塊以及聲明塊之間使用一空行分隔,子組件塊之間三空行分隔;
/* ==========================================================================
組件塊
============================================================================ */
/* 子組件塊
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子組件塊
============================================================================ */
.selector-secondary {
display: block; /* 注釋*/
}
.selector-three {
display: span;
}
代碼驗證不是最終目的,真的目的在于讓開發(fā)者在經(jīng)過多次的這種驗證過程后,能夠深刻理解到怎樣的語法或?qū)懛ㄊ欠菢藴屎筒煌扑]的,即使在某些場景下被迫要使用非標準寫法,也可以做到心中有數(shù)。