整潔樣式表的 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 和格式化的 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 格式化很重要

縮排規範

2 個空格縮排（最流行）

屬性排序

1. 按類型分組（推薦）

2. 字母順序

巢狀最佳實踐

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

不好的做法：深層巢狀

自動化格式工具

Prettier

Stylelint

BEM 命名規範

CSS 自訂屬性

常見格式錯誤

1. 缺少分號

2. 不一致的間距

3. 單行規則

常見問題

CSS 應該用 Tab 還是空格？

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

相關資源

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

為什麼 CSS 格式化很重要

縮排規範

2 個空格縮排（最流行）

屬性排序

1. 按類型分組（推薦）

2. 字母順序

巢狀最佳實踐

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

不好的做法：深層巢狀

自動化格式工具

Prettier

Stylelint

BEM 命名規範

CSS 自訂屬性

常見格式錯誤

1. 缺少分號

2. 不一致的間距

3. 單行規則

常見問題

CSS 應該用 Tab 還是空格？

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

相關資源