CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南

CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南

在本文中，我們將深入探討BEM（區塊、元素、修飾符） 方法，這是一種流行的CSS 命名約定，可幫助您為大型專案編寫乾淨、結構化且可維護的CSS。 BEM 確保您的程式碼隨著專案的成長保持可擴展性，並減少風格衝突的可能性。

1.什麼是邊界元法？

BEM 代表：

• 區塊：本身有意義的獨立實體，例如按鈕、選單或表單。
• 元素：執行特定功能的區塊的一部分，例如按鈕標籤或選單項目。
• 修飾符：區塊或元素的變體或狀態，例如停用的按鈕或反白的選單項目。

BEM 方法強調建立可重複使用、可預測且可維護的 CSS 程式碼。

BEM 命名約定：

.block {}
.block__element {}
.block--modifier {}

• Block：代表主容器。
• 元素：跟在區塊名稱後面，用雙底線（__）分隔。
• 修飾符：跟在區塊或元素名稱之後，以雙連字元 (--) 分隔。

2.定義結構

讓我們用一個例子來分解BEM的結構。

範例：

<div class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">Home</li>
        <li class="menu__item">About</li>
        <li class="menu__item">Contact</li>
    </ul>
</div>

在此範例中：

• 區塊：.menu 是代表導航選單的主區塊。
• 元素：.menu__list 和 .menu__item 是區塊內的元素。
• 修飾符: .menu__item--active 是修飾符，指示選單項目的活動狀態。

3. BEM 中的區塊

塊是一個獨立的、可重複使用的組件。將其視為一個獨立的實體，可以放置在程式碼中的任何位置，而不必擔心其樣式受到其他元素的影響。

範例：

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

這裡，.button 是一個定義按鈕元件樣式的區塊。您可以在網站的多個部分重複使用此區塊。

4. BEM 中的元素

元素是塊的一部分，沒有獨立的意思。它與區塊綁定並存在以執行與區塊相關的功能。

範例：

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

這裡：

• .button__icon 是 .button 區塊中的一個元素，代表按鈕中的圖示。
• .button__label 是另一個元素，代表按鈕的文字標籤。

5. BEM 中的修飾符

修飾符 表示區塊或元素的變體。修飾符用於更改組件的外觀或行為，例如更改按鈕的顏色或使元素更大。

範例：

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

這裡：

• .button--primary 是修改按鈕背景顏色的修飾符。
• .button--large 是另一個增加按鈕大小的修飾符。

修飾符也可以應用在元素上：

.button__icon--small {
    width: 10px;
    height: 10px;
}

6.使用 BEM 的好處

• 可擴展性：BEM 被設計為可擴展的，使其成為具有許多組件的大型專案的理想選擇。
• 可重複使用性：區塊是獨立的，可以在專案的不同部分重複使用。
• 可維護性：BEM 鼓勵清晰、一致的命名，使得隨著專案的發展更容易維護 CSS。
• 可預測性：您可以輕鬆辨別哪些元素屬於哪些區塊，並根據修飾符了解它們的變化。

7. BEM 的實際應用

讓我們來看一個更完整的範例，其中包括區塊、元素和修飾符：

HTML：

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Card Title</h2>
    </div>
    <div class="card__body">
        <p class="card__text">This is a simple card component.</p>
    </div>
    <div class="card__footer">
        <button class="button card__button card__button--primary">Read More</button>
    </div>
</div>

CSS：

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

在此範例中：

• .card 是代表整個卡片組件的區塊。
• .card__header、.card__title、.card__body 和 .card__footer 是卡片區塊中的元素。
• .card__button--primary 是將主要樣式套用於卡片內按鈕的修飾符。

8. BEM 中要避免的常見錯誤

• 巢狀元素過多：避免深層嵌套元素，因為它可能導致不必要的長類別名稱。
• 不必要的修飾符：僅在需要更改區塊或元素的外觀或狀態時才使用修飾符。
• 將 BEM 與其他命名約定結合：在整個專案中堅持使用 BEM 以保持一致性。

結論

BEM 方法是保持 CSS 有序、可預測和可擴展的強大方法。透過將組件分解為區塊、元素和修飾符，您可以維護更清晰的程式碼並避免樣式衝突，從而使您的專案開發更快、更有效率成長。

---

在 LinkedIn 上關注我

裡多伊‧哈桑

以上是CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！