CSS體系結構塊元素模型（BEM） - 站點點

bem（塊元素模型）是前端開發方法，命名約定和一組相關的工具。它起源於Yandex，旨在大型團隊的高效開發。這種解釋重點介紹了核心概念和命名系統。

>

bem將查看網站作為可重複使用的組件塊的集合，可組合構建接口。 塊是一個網站部分（標題，頁腳，側邊欄等），如圖2.3所示。 請注意，這裡的“塊”是指HTML頁面段。

>

圖2.3。 主頁可能包括標頭，主和頁腳塊。

>

>塊可以築巢。例如，標頭塊可能包含徽標，導航和搜索表單塊（圖2.4）。 頁腳可以包含一個站點地圖塊。

圖2.4。標題塊，包括徽標，導航和搜索塊。

元素比塊更顆粒狀。 正如BEM文檔所述：“元素是執行特定函數的塊的一部分。元素是上下文依賴的；它們僅在其父塊內才有意義。” 例如，一個搜索表單塊包括文本輸入元素和提交按鈕元素（圖2.5）。 在這裡，“元素”是指設計元素，而不是html元素。

>

圖2.5。帶有文本輸入並提交按鈕元素的搜索塊。

> >一個主內容塊可能包含一個文章列表塊，該列表又包含文章促銷塊。每個促銷塊都可以具有圖像，摘錄和“閱讀更多”元素（圖2.6）。

圖2.6。網站文章的促銷障礙。

框架和元素構成了BEM命名約定的核心：>

塊名稱必須在項目範圍內唯一。

元素名稱必須在一個塊中是唯一的。

>

>塊變體（例如，一個深色搜索框）使用類名稱中的修飾符。

• 塊和元素名稱由兩個下劃線（
）隔開。 修飾符與塊/元素名稱通過兩個連字符（
• ）分開。
>
• 這是一個bem風格的搜索表格示例：

一個深為主題的版本：__ --

對應的CSS：

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

在標記和CSS中，

>和search--inversesearch__label--inverse是> 類，而不是替換。 僅使用類選擇器；允許兒童和後代選擇器，但也應針對類。避免元素和ID選擇器。這使選擇器特異性保持較低，防止副作用，並使CSS獨立於標記模式。 唯一的塊和元素名稱可以防止命名衝突。 好處包括：

• 提高了新團隊成員的代碼可讀性和理解。
• 提高了團隊生產率。
• 降低命名碰撞和副作用。
• css獨立於標記。
• 高CSS可重複使用性。

> BEM的範圍超出了此概述。 BEM官方網站提供了全面的詳細信息，工具和教程。 “ Get Bem”是命名慣例的另一個絕佳資源。

>

>（省略了常見問題部分，因為它是已經存在的信息的重複，並且會大大增加輸出的長度而不添加新內容。

以上是CSS體系結構塊元素模型（BEM） - 站點點的詳細內容。更多資訊請關注PHP中文網其他相關文章！