CSS BEM 命名規範 | 8月更文挑戰

BEM 是一種前端項目開發的方法學，由 Yandex 公司提出。

BEM 的名稱來源於該方法學的三個組成部分的英文首字母，分別是塊（Block）、元素（Element）和修飾符（Modifier）。

這裏推薦一篇關於使用 BEM 的組件命令規範的示例文章：bem naming cheat sheet by 9elements。

其中介紹了包括：麪包屑、按鈕、卡片、列表、導航、佈局、表單控件等一些組件的結構、命令示例。

什麼是 CSS BEM？

BEM（Block Element Modifier，塊元素修飾符）方法是 CSS 類的命名約定，旨在經過定義命名空間來解決範圍問題來使 CSS 更具可維護性。

它原則上建議爲獨立的 CSS 類命名，而且在須要層級關係時，將關係也體如今命名中，這天然會使選擇器高效且易於覆蓋。

• block（塊） 是一個獨立的組件，可在項目中重複使用，並充當子組件（元素）的 "命名空間"。
• 當 block（塊） 或 element（元素） 處於特定狀態或結構或樣式不一樣時，將 modifier（修飾符） 用做標誌。

BEM 命名約定

• block 表明了更高級別的抽象或組件。
• block__element 表明 .block 的後代，用於造成一個完整的 .block 的總體。
• block--modifier 表明 .block 的不一樣狀態或不一樣版本。

.block {}
.block__element {}
.block--modifier {}
複製代碼

示例

• BEM 實體名稱所有是小寫字母或數字。名稱中的不一樣單詞用單個連字符（-）分隔。
• BEM 元素名稱和塊名稱之間經過兩個下劃線（__）分隔。
• BEM 修飾符和其所修飾的實體名稱之間經過兩個連字符（--）來分隔。

<ul class="menu">
  <li class="menu__item menu__item--selected">Item 1</li>
  <li class="menu__item">Item 2</li>
  <li class="menu__item">Item 3</li>
</ul>
複製代碼

CSS 以下：

.menu {
  list-style: none;
}

.menu__item {
  font-weight: bold;
}

.menu__item--selected {
  color: plum;
}
複製代碼

分析

• .menu 封裝一個獨立的實體，它自己是有意義的。雖然塊能夠嵌套並相互交互，但在語義上它們是相等的；沒有優先級或等級制度。
• .menu__item 塊的一部分，沒有獨立的意義。任何元素在語義上都與其塊相關聯。
• .menu__item--selected 塊或元素上的修飾符。使用它們來改變外觀、行爲或狀態。

BEM 命名規範帶來的好處

BEM 的優勢在於所產生的 CSS 類名都只使用一個類別選擇器，能夠避免傳統作法中因爲多個類別選擇器嵌套帶來的複雜的屬性級聯問題。

換句話說，其全部樣式規則的特異性（specificity） 都是相同的，也就不存在複雜的優先級問題，簡化了層疊規則。若是你還不是很瞭解特異性的話，能夠查閱以前寫的一篇 CSS 繼承、級聯和特異性。

細分後，能夠從模塊化、可重用性、結構三部分進行理解：

• 模塊化：塊樣式從不依賴於頁面上的其餘元素，所以您將永遠不會遇到級聯帶來的問題。
• 可重用性：以不一樣的方式構成獨立的塊，並以智能方式對其進行重用，從而減小了必須維護的 CSS 代碼量。
• 結構：BEM 方法爲您的 CSS 代碼提供了堅實的結構，使結構保持簡單易懂。

其餘的一些命名規範

除了 BEM 之外，還有其餘一些經常使用命名規範如：OOCSS、SMACSS 等。

OOCSS

OOCSS 表示的是面向對象 CSS（Object Oriented CSS），是一種把面向對象方法學應用到 CSS 代碼組織和管理中的實踐

OOCSS 有兩個重要的原則

• 第一個原則是把結構和外觀分開。
• 第二個原則是把容器和內容分開。

SMACSS

SMACSS 表示的是可擴展和模塊化 CSS（Scalable and Modular Architecture for CSS）。

SMACSS 把 CSS 樣式規則分紅若干個不一樣的類別：

• 基礎：該類別中包含的是默認的 CSS 樣式。做爲其餘樣式的基礎。
• 佈局：該類別中包含與頁面佈局相關的 CSS 樣式，用來進行模塊的排列。
• 模塊：該類別中包含的是可複用的模塊的 CSS 樣式。
• 狀態：該類別中的 CSS 樣式用來描述佈局和模塊在不一樣狀態下的外觀。好比在不一樣的屏幕尺寸下，佈局會發生變化。標籤式模塊的每一個標籤頁能夠有顯示或隱藏的狀態。
• 主題：該類別和狀態相似，只不過是用來改變佈局和模塊的視覺效果。

進一步閱讀

• 如何看待 CSS 中 BEM 的命名方式？
• BEMIT: Taking the BEM Naming Convention a Step Further