CSS 命名規範（BEM）

CSS 命名規範（BEM）

BEM（Block Element Modifier）是一種常見的 CSS 命名規範，旨在提高 CSS 代碼的可讀性、可維護性和重用性。BEM 的核心思想是將一個界面分解為獨立的模塊（Blocks），每個模塊由不同的元素（Elements）組成，並通過修飾符（Modifiers）來改變模塊或元素的樣式。

1. BEM 命名規範的結構

BEM 命名規範的基本結構如下：

• Block（塊）：代表一個獨立的界面模塊，可以是頁面上的任何一個具體的組件（例如：按鈕、導航欄、表單）。
• Element（元素）：代表 Block 的一部分，用雙下劃線 __ 分隔 Block 和 Element。元素必須依賴於 Block 來定義。
• Modifier（修飾符）：用來定義 Block 或 Element 的不同狀態或樣式變體，用雙連接線 -- 分隔 Block/Element 和 Modifier。

BEM 命名範例

假設我們有一個按鈕作為 Block：

<button class="button">按鈕</button>

這個按鈕的 BEM 命名規範結構如下：

• Block: button

如果按鈕內有一個圖標（Element）：

<button class="button">
  <span class="button__icon">⭐</span>
  按鈕
</button>

這裡的 button__icon 是 button Block 的一個元素。

如果這個按鈕有一個主樣式（Modifier）：

<button class="button button--primary">按鈕</button>

這裡的 button--primary 是一個修飾符，表示該按鈕為主要樣式。

2. BEM 命名規則示例

以導航欄為例，BEM 命名可以如下：

<nav class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__item navbar__item--active"><a href="#" class="navbar__link">首頁</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">關於我們</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">服務</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">聯絡我們</a></li>
  </ul>
</nav>

• Block: navbar
• Element:
  • navbar__menu 是導航欄的元素（列表容器）
  • navbar__item 是列表項元素
  • navbar__link 是每個鏈接元素
• Modifier:
  • navbar__item--active 表示當前選中的列表項樣式

3. BEM 的優點

• 提高可讀性：BEM 命名的結構清晰易懂，讓開發者能夠快速理解 CSS 規則所作用的元素。
• 增強可維護性：由於 BEM 將樣式分割成獨立的模塊，樣式修改不會影響其他部分。
• 避免樣式衝突：使用特定的命名約定可以有效避免全局樣式污染和選擇器衝突。
• 提升重用性：模塊化的命名方式使得樣式更易於重用和擴展。

4. 實踐中的 BEM 應用

Button 元素的 BEM 應用

<button class="button button--primary">
  <span class="button__icon">⭐</span>
  按鈕
</button>
<button class="button button--secondary">
  <span class="button__icon">✓</span>
  按鈕
</button>

CSS：

/* Block 基本樣式 */
.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* Element 樣式 */
.button__icon {
  margin-right: 8px;
}

/* Modifier 樣式 */
.button--primary {
  background-color: #4CAF50;
  color: #fff;
}

.button--secondary {
  background-color: #2196F3;
  color: #fff;
}

這樣的命名方式使得每個按鈕的元素和狀態都能夠清晰明瞭。

5. BEM 命名的最佳實踐

• 避免過度嵌套：保持選擇器簡單，不要過度嵌套。例如，不要使用 .block__element1__element2，而應該將其拆分成兩個獨立的 Element。
• 保持 Block 簡單獨立：每個 Block 都應該是獨立的、可重用的模塊，不依賴於其他 Block 的樣式。
• 合理使用 Modifier：使用 Modifier 來表示狀態或外觀的變化，而不是添加新的元素或 Block。

6. BEM 的局限性

• 冗長的命名：BEM 的命名規則可能會導致樣式名稱變得較長，特別是在多層嵌套的情況下，這可能會影響編碼效率。
• 學習曲線：對於新手來說，理解和應用 BEM 可能需要一些時間和練習。

小結

BEM 是一種強大的命名規範，適用於大型或長期維護的項目。它的優點在於提高代碼的可讀性和可維護性，並促進樣式的模塊化和重用。通過合理運用 BEM，可以更好地組織和管理樣式，提升開發效率。