不管是下面的準則或您自己的準則,只要用同樣的準則即可。如有任何不對之處,請不吝指教。若想新增或貢獻內容,請至 GitHub 來提 issue。
不管有多少個貢獻者,每行程式碼都應該像是同一人所寫。
</li>
或 </body>
)。每個 HTML 頁面開頭使用這個簡單的 doctype,來啟用標準模式。每個瀏覽器將會有更加一致的 render 結果。
引用自 HTML5 規格:
鼓勵作者指定根 HTML 元素的 lang 屬性,給予文件使用的語言。這有助於語音合成工具判定要使用的發音以及翻譯工具判斷使用的規則等等。
zh-Hant-TW 係根據目前的規範依照「RFC 5646 Tags for Identifying Languages」
IE 支援使用 <meta>
標籤來指定 IE 是否應該呈現指定的版本。除非另有其他考量,否則它是最實用指定
IE 瀏覽器使用最新模式 edge mode 的方法
深入閱讀請查閱 stackoverflow 的討論 What's the difference if <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> exists or not?.
明確宣告字元編碼來快速簡單地確保內容 render 正確無誤。
根據 HTML5 規範,引用 JavaScript 與 CSS 檔案時,無需指定 CSS 與 JavaScript 的 type
。因為預設值便是 text/css
和 text/javascript
。
在不犧牲實用性的前提下,盡力維持 HTML 的標準與語義。盡量使用簡潔、簡單的 Markup。
HTML 屬性應按照特定順序撰寫,確保程式碼的易讀性。
class
id
, name
data-*
src
, for
, type
, href
, value
title
, alt
aria-*
, role
Class 是為了重用的元素而生,應該排第一位。ID 具體得多,應盡量少用(可用場景像是頁內書籤),所以排第二位。
布林屬性是不需要寫值的屬性。XHTML 要求你宣告數值,但 HTML5 不需要。
深入閱讀請查閱 WhatWG 關於布林屬性一節:
元素有布林屬性存在即代表 true value,反之不存在則代表 false value。
如果一定要附上屬性的數值的話,則無需遵守 WhatWG 的這條規則:
如果有寫屬性的話,其數值必須是空字串或是屬性的標準名稱(需符合 ASCII 不分大小寫的規則),且前後不可有空白。
長話短說,不用寫數值。
撰寫 HTML 時,盡量避免多餘的父元素。這需要反覆重寫與重構,才能寫出更少的 HTML。看看右邊這個例子:
Markup 寫在 JavaScript 裡,不僅難找、也更難編輯,性能更是差。盡量避免在 JavaScript 裡撰寫 Markup。
.open
: drop-down.hover
: mouseover.selected
: multi-select.active
: slideshow, tab.current
: pager:
後面留一個空白。box-shadow
,inset
前方逗號後有留空白)。.5
,不要寫成 0.5
。#fff
。#fff
來取代 #ffffff
。input[type="text"]
。margin: 0;
而不是 margin: 0px;
。對於這裡使用的術語有任何問題嗎?請參考維基百科上關於層疊樣式表條目裡的語法小節。
相關的屬性宣告應以下列順序分組:
Content: 內容本身最重要,需定義在最前面較清楚(例如:偽元素內容)。
Positioning: 可以從正常文件順序裡移除元素(out of flow)的位置宣告,或是覆寫牽扯到 Box Model 的樣式。
顯示 & Box Model: 決定元件的位置與尺寸 或 與 Box Model 相關。
其它只在元件內部起作用的屬性放後面,因為這不會影響前面。
Typography: 文字樣式呈現。
Visual: 其他視覺樣式呈現。
Animation: 動畫因為較不影響排版,所以放最後。
關於屬性順序的完整列表,請參考 Recess、idiomatic-css #declaration-order。
將 Media Query 與其最相關的規則放在一起。別把他們放在 CSS 檔案最後面,或是獨立成另外的樣式表。這樣只會讓之後接手的人錯過他們。右邊是個經典範例。
使用帶有各家廠商前綴的屬性時,縮排每個屬性、垂直對齊,以便多行編輯。
當一組規則只包含單條宣告的的情況裡,考慮移除換行;寫成單行的可讀性更高、更容易編輯。任何包含多條宣告的一組規則應該要分為多行。
這麼分的關鍵因素是錯誤偵測─比如:CSS Validator 表示 183 行有語法錯誤。如果是單行宣告便就是那行,多條宣告沒分行的話則會找到抓狂。
宣告盡量少用簡寫,最好明確的將所有的值寫出來。過度濫用簡寫的特性包含:
padding
margin
font
background
border
border-radius
通常我們只需設定需要的值,簡寫會設定到多餘的值。舉例來說,HTML 標題只會設定 top 與 bottom margin,所以只要更改這兩個值即可。濫用特性縮寫只會寫出更差的程式碼,也會有無謂的覆寫與不預期的副作用。
Mozilla Developer Network 有篇很好的專文,給不熟悉記法與行為的開發者:特性簡寫。
避免無謂的巢狀。可用巢狀不表示都要用巢狀。
只在多元素需要巢狀,或是需要在父元素下增加樣式的場景下使用巢狀。
程式碼是由人來撰寫與維護的。
確保程式碼精準描述、有良好的註解,讓別人看起來是很親切。
好的註解傳遞意圖、意境。
註解不要只是重複元件或是 Class 的名稱。
長註解記得使用完整的句子,一般的筆記用簡潔的用語。
.btn
和 .btn-danger
)。.btn
很好,但 .s
不代表任何元素。.js-*
Class 來標示行為(相對樣式來說),這些類別放在另外的 CSS。[class^="..."]
)。大家都知道這會影響到瀏覽器的性能。延伸閱讀:
羅列目前較有 z-index 問題如下:
基本 z-index
= order 數字 * 1000,
有異動需更新文件。
使用 webpack v1.10.1 uglify 或是 css-loader v0.28.7 minimize, 中文字元後會多一個 \(比如:
\5FAE\8EDF\6B63\9ED1\9AD4
變成
\\5FAE\8EDF\6B63\9ED1\9AD4
。
因此只使用英文字體名稱,並且在字型名稱中有空格時加上雙引號,避免 bundle 的結果 encode 錯誤。
若專案上有使用到cssnano,在使用css Animation的@keyframes時cssnano會自動將@keyframes的名稱重新命名,並依照字母順序排列(如右側範例)。
為了避免不同專案的@keyframes命名衝突,請於:
{ reduceIdents: false }
推薦閱讀 Essential Image Optimization 深入瞭解圖片的最佳化技巧
推薦閱讀 Essential Image Optimization 深入瞭解圖片的最佳化技巧
V8 6.0 引擎的新架構 TurboFan 對 ES2015 的語法有更好的效能 資料來源
使用下列設定來設定編輯器,避免掉常見的程式碼不一致和醜陋的 diffs:
考慮將以上偏好應用到專案的 .editorconfig
檔案並撰寫文件說明。舉個例子,參考 Bootstrap 的 .editorconfig
。瞭解更多內容,請參考 editorconfig.org。