Code Guide by @mdo（HTML / CSS 編碼規範）
後設資料
- URL：https://codeguide.co/
- 作者：Mark-Otto（@mdo；Bootstrap 共同創作者，前 Twitter / GitHub 設計工程師）
- 首版：2011 年；當前 v4.0.0；MIT 授權，repo
mdo/code-guide - 語言：英文
- 媒體：個人單頁網站
- 取得脈絡：使用者 2026-05-01 透過 Facebook 分享連結帶入 vault（fbclid 參數）
一句話濃縮
一份精簡、被廣泛借用的 HTML / CSS 編碼規範；Golden Rule「Every line of code should appear to be written by a single person, no matter the number of contributors.」用最短的話講清楚 程式碼風格指南 這個概念存在的目的。
提取要點
Golden Rule（元命題）
Every line of code should appear to be written by a single person, no matter the number of contributors.
程式碼風格指南 的驗收條件——多人協作後仍要讀起來像一個人寫的。
HTML 規範
- 所有標籤一律小寫（含
<!doctype html>）；軟 tab 兩格縮排；attribute 一律雙引號。 - self-closing 元素不加 trailing slash（HTML5 spec 標明可選）；不省略可選的關閉標籤（
</li>/</body>）。 - 一律
<!doctype html>強制 standards mode；<html lang="en">標明語言（語音合成 / 翻譯 / 無障礙都會用到）。 - IE 相容 meta 已可省略（IE10 以下才需要）；
<meta charset="utf-8">必加。 - Practicality over purity：HTML 不必嚴守 XHTML 自我關閉等老規矩——可讀性與務實優先。
- 屬性順序（穩定的視覺掃描順序）：
class→id,name→data-*→src,for,type,href,value→title,alt→role,aria-*→ 其他。 - boolean attribute 只寫 key，不寫 value（
<input disabled>，不是disabled="disabled"）。 - Reduce markup：能用一個 element 解的不要包兩層；能用 CSS 解的不加 div wrapper。
- 編輯器設定：soft tab 2 spaces / 文末刪空白 / 文末加 newline / UTF-8 / Unix line endings——透過
.editorconfig跨團隊統一。
CSS 規範
- 一個 selector 一行；
{前加空格；}自成一行；每個 property 一行；尾分號必加；冒號後一空格；HEX 一律 lowercase + 三字簡寫優先（#fff不#FFFFFF）。 - 宣告順序（從外向內、從結構向裝飾）：定位（position / top / right / bottom / left / z-index）→ 盒模型（display / box-sizing / width / height / margin / padding）→ 文字（font / line-height / text-align / color）→ 視覺（background / border / border-radius）→ 雜項（opacity / transform）。
- 優先 logical properties：
margin-block-start/inline-size取代margin-top/width，多語向（RTL / 直書）支援更好。 - 避免
@import：用<link>、CSS concat、preprocessor、HTTP/2 多路傳輸取代。 - media query 緊鄰相關規則——不要全部塞檔末，閱讀脈絡會斷。
- 單行宣告：當 ruleset 只有一條 declaration 時可單行（縮減視覺 noise，但別濫用）。
- shorthand 慎用：只在真要設定全部值時用
padding: 1rem；否則明寫單邊以免覆蓋未預期屬性。 - preprocessor 不過度嵌套（最多 ~3 層）；operators 用空格 +
()維持可讀。 - class 命名：lowercase / hyphen 分隔（
.btn-primary）/ 具語意但 brief / 不用 camelCase / underscore。 - selector：盡量用 class，不用 id / 標籤；child / descendant selector 慎用（耦合 markup）；具體性盡量低。
- Organization：一份 CSS 一個責任；按 component 分割；用註解區隔大區塊；commit / PR 風格也算規範一部分。
元命題（從規則裡讀出來的）
- 風格指南的最大價值不是「哪條規則最對」，而是收斂團隊判斷分歧——大家用同一條，比哪條更好重要。
- Practicality over purity：規則服務於可讀性與可維護性；遇到衝突，讓步給「讀起來自然」。
- 規範本身愈短愈好——
mdo的 v4 全文一頁可讀完；長度膨脹的 style guide 沒人會真讀。
提取概念
- Mark-Otto — 文章作者；Bootstrap 共同創作者；vault 中代表「Web UI 工業化基準制定者」的個人實體第一案。
- 程式碼風格指南 — vault 中此概念的定義性錨點來源；Golden Rule 為其元命題。
- 對位連結：AI輔助開發（CLAUDE.md / .cursorrules 是「寫給 LLM 讀的 style guide」）/ 排版（共享「沒有感覺」元命題：好排版讀者無感、好風格指南讀起來像一個人寫的）/ Context-Engineering（style guide 是長期穩定的低變動 context，由配置層載入而非每次 prompt 重述）。
原文（可選）
Ingest 時透過 WebFetch 工具讀取，工具回傳的是被小型模型摘要過的內容、非 verbatim 原文。本頁「HTML 規範」/「CSS 規範」段已從原文目錄結構轉成中文要點摘錄。原始 URL 見上方。