BEM

BEM 代表 Blocks, Elements and Modifiers。這是一種最初由俄羅斯科技公司 Yandex 構思的方法，但在美國和西歐的網路開發者中也獲得了相當大的吸引力。

同樣的意思是，BEM 方法論將 HTML 和 CSS 程式碼元件化為三種型別的元件：

• 塊： 獨立實體，它們本身就是有意義的

  例如 header，container，menu，checkbox＆textbox

• 元素： 塊的一部分，沒有獨立的含義，並且在語義上與它們的塊相關聯。

  例如 menu item，list item，checkbox caption＆header title

• 修飾符： 塊或元素上的標誌，用於更改外觀或行為

  例如 disabled，highlighted，checked，fixed，size big＆color yellow

BEM 的目標是保持優化 CSS 程式碼的可讀性，可維護性和靈活性。實現這一目標的方法是應用以下規則。

• 塊樣式永遠不依賴於頁面上的其他元素
• 塊應該有一個簡單的短名稱，並避免使用 _ 或 - 字元
• 在樣式元素時，使用格式 blockname__elementname 的選擇器
• 樣式修飾符時，請使用格式為 blockname--modifiername 和 blockname__elementname--modifiername 的選擇器
• 具有修飾符的元素或塊應繼承其正在修改的塊或元素中的所有內容，但修飾符應修改的屬性除外

程式碼示例

如果將 BEM 應用於表單元素，則 CSS 選擇器應如下所示：

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

相應的 HTML 應如下所示：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>