整潔樣式表的 CSS 格式化最佳實踐

格式良好的 CSS 是每個可維護 Web 專案的基礎。混亂的樣式表會拖慢除錯速度、挫敗團隊成員的積極性，並引入難以察覺的錯誤。本指南涵蓋了專業開發者用來保持 CSS 整潔一致的規範、工具和技巧。

為什麼 CSS 格式化很重要

未格式化的 CSS 和格式化的 CSS 執行效果相同——瀏覽器不在意空白。但開發者在意。格式不良的樣式表會導致：

• 合併衝突——多個開發者編輯同一檔案時
• 重複宣告——在大段文字中難以發現
• 新成員上手更慢
• 隱藏的 Bug——被不一致的縮排和巢狀所掩蓋

一致的格式消除了這些問題，使程式碼審查更快、更高效。

縮排規範

兩種主要規範是 2 個空格和 4 個空格。Tab 在 CSS 中不太常見，但一些專案仍在使用。

2 個空格縮排（最流行）

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
}

大多數 CSS 風格指南——包括 Google 和 Airbnb 的——推薦 2 個空格。這在媒體查詢和預處理器巢狀中保持巢狀選擇器的可讀性。

屬性排序

隨機的屬性順序是 CSS 中最常見的格式錯誤。有兩種主要策略：

1. 按類型分組（推薦）

.element {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* 顯示與盒模型 */
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;

  /* 排版 */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* 視覺效果 */
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;

  /* 動畫 */
  transition: transform 0.2s ease;
}

2. 字母順序

一些團隊按字母順序排列屬性。簡單且可預測，但會分離 width 和 height 等相關屬性。

分組方法在掃描規則集時提供更好的上下文。

使用我們的 CSS 格式化工具 即時格式化你的 CSS。

巢狀最佳實踐

CSS 巢狀（原生或透過 Sass 等預處理器）可以提高可讀性，但過度使用也會產生問題。

好的做法：淺層巢狀（最多 2–3 層）

.nav {
  display: flex;
  gap: 1rem;

  & .nav__link {
    color: #555;
    text-decoration: none;

    &:hover {
      color: #0066cc;
    }
  }
}

不好的做法：深層巢狀

深層巢狀會產生冗長且高度特定的選擇器，難以覆蓋且影響效能。一個好的規則：如果巢狀超過 3 層，就重構結構。

自動化格式工具

手動格式化無法擴展。使用自動化工具在團隊中保持一致性。

Prettier

Prettier 是最流行的程式碼格式化工具，原生支援 CSS、SCSS 和 Less：

npm install --save-dev prettier
npx prettier --write "**/*.css"

Stylelint

Stylelint 偵測錯誤並在格式之外執行規範：

npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

BEM 命名規範

BEM（區塊元素修飾符）是使用最廣泛的 CSS 命名規範：

/* 區塊 */
.card { }

/* 元素（區塊的一部分） */
.card__header { }
.card__body { }

/* 修飾符（區塊或元素的變體） */
.card--featured { }

CSS 自訂屬性

自訂屬性（CSS 變數）從一致的格式中獲益巨大：

:root {
  /* 顏色 */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* 排版 */
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;

  /* 間距 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

按類別對變數進行分組，並使用一致的命名前綴。

常見格式錯誤

1. 缺少分號

始終在最後一個宣告中包含尾部分號。這可以防止新增屬性時出現錯誤。

2. 不一致的間距

/* 不好 */
.header{
  color : red;
  margin:0;
}

/* 好 */
.header {
  color: red;
  margin: 0;
}

3. 單行規則

單行規則使 git diff 變得雜亂，屬性容易被遺漏。始終使用多行格式。

常見問題

CSS 應該用 Tab 還是空格？

空格是 CSS 的業界標準。大多數風格指南和格式化工具（Prettier）預設使用 2 個空格。使用團隊達成一致的方式，但要保持一致性。

如何在團隊中強制執行 CSS 格式？

設定帶有共享設定檔的 Prettier，使用 Husky 和 lint-staged 新增 pre-commit 鉤子，並設定 CI 管道拒絕未格式化的程式碼。

相關資源

• CSS 格式化工具 — 即時格式化和美化 CSS
• 程式碼壓縮指南 — 為生產環境最佳化 CSS
• HTML 格式化最佳實踐 — 將同樣的原則應用於 HTML

---

🛠️ 立即體驗： CSS 格式化工具 — 貼上你的 CSS，取得完美格式化的輸出。100% 免費，瀏覽器內處理所有資料。

---