CSS規範須知——快速瞭解BEM

BEM 命名規範

BEM，表示 Block Element Modifier，可以理解為幫助我們在前端開發中寫出更具複用性的元件和程式碼的一套方法。更具體點，是一種有效的命名規範，可以滿足我們寫出更優質的前端程式碼，體現在：

• easier to read and understand
• easier to work with
• easier to scale
• more robust and explicit
• a lot more strict

三個樣式書寫規範

• 只使用 class 作為樣式的選擇器
• 避免使用 id 和標籤
• 避免在一個頁面中對其他 blocks/elements 有依賴（也就是避免寫出巢狀的選擇器）

命名解釋

• Block

  頁面上有意義的一個實體。

  比如：header、container、menu、checkbox、input

• Element

  Block 的一個部分，本身是沒意義的，但是和 Block 聯絡在一起就有了語義。

  比如：menu item、list item、checkbox caption、header title

  // Good
  .block__elem { ... }
  
  // Bad（帶有巢狀，帶有標籤名）
  .block .block__elem { ... }
  div.block__elem { ... }
  複製程式碼

• Modifier

  表示 Block 或 Element 的一個狀態，或是對它們的一個修飾符。

  比如：disabled、highlighted、checked、fixed、size、big、color yellow

  // Good
  <div class="block block--mod">...</div>
  
  // Bad
  <div class="block--mod">...</div>
  複製程式碼

  // 類名寫法
  .block--mod { }
  .block__elem--mod { }
  .block--color-black { }
  .block__elem--color-red { }
  複製程式碼

參考

• BEM