CSS Class 命名模組化(BEM):新手入門指南

更新日期: 2024 年 10 月 29 日

在 CSS 編寫中,命名是一項至關重要的工作,特別是在網站項目變得複雜、頁面增多時,擁有一套模組化的命名規則,可以讓你的 CSS 代碼更清晰、易於維護和擴展。

這篇文章將介紹 CSS Class 的模組化命名方式,幫助新手理解如何使用一致的命名規則,來提升項目管理效率。

閱讀本文前,建議具備相關概念:為什麼在 CSS 中應該避免使用 ID 和標籤選擇器?


什麼是 CSS Class 命名模組化?

CSS Class 的模組化命名,簡單來說,就是為 CSS 類別設定一套一致的命名規則,讓代碼在命名上,更具邏輯性和可讀性。

模組化命名通常會根據項目需求進行設計,讓每個 Class 名稱反映出它的用途和屬性,這樣在瀏覽和維護代碼時更加方便。

常見的模組化命名方式有 BEM(Block、Element、Modifier),這種命名規範為開發者提供了一種組織代碼的系統,非常適合新手使用。


BEM 命名規範:新手的最佳選擇

BEM 是一種非常受歡迎的命名方式,用來讓 CSS Class 名稱反映出其結構。

BEM 的全名是 Block(區塊)、Element(元素)、Modifier(修飾符),這種規範的核心目標是讓每個類別名稱表達其「角色」和「狀態」。

  • Block(區塊):表示一個獨立的功能組件或模塊,例如按鈕、導航欄等。
  • Element(元素):表示 Block 中的子元素,無法獨立存在,屬於 Block 的一部分,例如按鈕上的文字、導航欄中的連結等。
  • Modifier(修飾符):表示元素的不同狀態或樣式變體,例如按鈕的啟用或禁用狀態。

BEM 命名語法

BEM 命名的格式通常如下:

  • block-name:代表一個獨立的區塊。
  • block-name__element-name:代表區塊內的元素,使用 __ 將區塊和元素分開。
  • block-name--modifier-name:代表區塊或元素的修飾符,用 -- 來分隔修飾符。

三、如何使用 BEM 命名規範

以下是一個簡單的範例,使用 BEM 規範來創建一個按鈕組件:

HTML

<div class="button">
  <span class="button__text">點擊我</span>
</div>

CSS

.button {
  background-color: blue;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.button__text {
  font-size: 16px;
}

.button--disabled {
  background-color: gray;
  cursor: not-allowed;
}

說明

  • button:這是一個獨立的區塊,代表按鈕的主要樣式。
  • button__text:這是按鈕的文字部分,屬於按鈕的一部分。
  • button--disabled:這是按鈕的修飾符,用來表示按鈕在禁用狀態下的樣式。

使用這種命名規則,不僅讓我們清楚了解每個 Class 的作用,還能有效避免樣式名稱的衝突。

例如,如果有另一個區塊需要使用文字樣式,可以使用不同的命名,不會干擾到按鈕的樣式。


BEM 命名的優點

採用 BEM 進行模組化命名的好處在於:

  1. 易讀性高
    BEM 將名稱清晰地分為「區塊、元素和修飾符」,能夠讓開發者快速理解每個 Class 的作用。即使是新手,看到 Class 名稱也能大概猜到它的樣式功能。
  2. 減少樣式衝突
    BEM 命名具有高度唯一性,不容易與其他樣式混淆。由於每個名稱都是根據組件來設計的,能夠有效避免不同區塊之間的樣式干擾。
  3. 方便維護和擴展
    當我們需要修改或添加新的功能時,可以依據現有的 BEM 命名規則輕鬆找到需要調整的樣式,並且不會影響到其他不相關的區塊。

BEM 命名進階範例:卡片組件

以下是一個更完整的範例,展示了如何使用 BEM 命名來構建一個卡片組件,卡片中包含標題、圖片和描述文字。

HTML

<div class="card">
  <img src="image.jpg" alt="圖片說明" class="card__image">
  <h2 class="card__title">卡片標題</h2>
  <p class="card__description">這是卡片的描述文字。</p>
</div>

CSS

.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  max-width: 300px;
}

.card__image {
  width: 100%;
  border-radius: 5px 5px 0 0;
}

.card__title {
  font-size: 18px;
  margin: 10px 0;
}

.card__description {
  font-size: 14px;
  color: #666;
}

說明

  • card:代表卡片組件的區塊,包含整體的邊框、內邊距和大小。
  • card__image:表示卡片中的圖片元素。
  • card__title:卡片的標題文字。
  • card__description:卡片的描述文字。

這樣的命名方式清晰簡潔,讓每個樣式名稱都清楚地代表它的功能,即使在更大的項目中也能保持一致性。


其他常見的模組化命名方式

除了 BEM 外,還有一些其他常見的模組化命名方式,根據不同的開發需求可以選擇使用:

  1. OOCSS(Object-Oriented CSS)
    將樣式分為「結構(structure)」和「皮膚(skin)」兩部分,使樣式更具可重用性。
  2. SMACSS(Scalable and Modular Architecture for CSS)
    將 CSS 分成基礎樣式、布局樣式、模組樣式、狀態樣式等不同層次,讓樣式結構更具組織性。
  3. Atomic CSS
    將樣式劃分為一個個小的「原子」,例如邊距、背景色、字體大小等,每個 Class 只負責一個屬性,讓組合更為靈活。

對於新手來說,BEM 是一個相對容易上手的模組化命名方式,但理解其他方法也有助於未來的項目管理。


總結

模組化的 CSS 命名能夠顯著提高開發效率和代碼可讀性,BEM 是其中最受歡迎的方式之一,特別適合新手學習和使用。

通過清晰的「區塊、元素和修飾符」命名,我們能更輕鬆地管理項目中的樣式、減少樣式衝突,並讓 CSS 代碼更具結構性。

掌握 BEM 命名規範後,建議多練習,將其運用到小型項目中,從而提升 CSS 編寫的效率和品質。

隨著項目的增多和經驗積累,你會發現模組化命名能讓開發流程更加順暢,也會對後續學習其他命名方式產生幫助。

希望這篇文章,能讓你對 CSS Class 的模組化命名,有更清楚的認識!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *