CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-09-28 06:16:29

原創

730 人瀏覽過

CSS BEM Model – A Guide to Writing Scalable and Maintainable 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;
}

登入後複製

在此範例中：