BEM命名規範入門及常用CSS class 命名

輕劍快馬發表於2019-03-01
CSS

為什麼需要BEM

如果編寫專案的 CSS 程式碼只有你一個人，或者專案的 CSS 程式碼量很小，你可以用你喜歡，習慣的方式去組織你的 CSS 程式碼。但是專案更大，更復雜，有多人編寫專案的 CSS 程式碼（每個人有自己的風格），程式碼量大的時候，就需要一種統一形式去組織 CSS 程式碼，這時候 BEM 就派上用場了。

什麼是BEM

BEM(Block Element Modifier) 是一種命名CSS class的模式，使用這種模式可以讓 CSS 程式碼更加利於維護。標準的 BEM 寫法是 .block-name__element-name--modifier-name。

Block

頁面上邏輯和功能獨立的，可複用的元件，可以巢狀並相互互動，但在語義上它們保持平等，可以存在頁面上不同的位置或不同專案中，保持樣式不變。

可以使用字母，數字，連字元進行命名，任何html元素都可以成為一個block，不依賴於頁面上的其他block或者element。

<header class="header"></header>
複製程式碼
.header {
  color: #333;
  background: #f5f5f5;
}
複製程式碼

Element

組成塊的一部分，內部的任何元素都與塊有關聯，不能在塊的外部使用。

<article class="article">
  <h2 class="article__title"></h2>
  <p class="article__content"></p>
</article>
複製程式碼
.article {
  padding: 12px;
}

.article__title {
  font-size: 1rem;
}

.article__content {
   font-size: .9rem;
}
複製程式碼

Modifier

用來表示塊或者元素的狀態，外觀或者行為，不必須，可以選擇使用。

<button class="btn btn--disabled"></button>
複製程式碼
.btn {
  color:  #333;
  background-color: #fff;
}

.btn--disabled {
  color: #fff;
  background-color: #6c757d;
}
複製程式碼

示例

BEM命名規範入門及常用CSS class 命名
這樣的卡片是一個單獨的塊

<div class="list-card">
  <img class="list-card__img" />
  <div class="list-card__content">
    <a class="list-card__link"></a>
    <p class="list-card__desc"></p>
    <div class="list-card__stats">
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__date"></span>
    </div>
  </div>
</div>
複製程式碼

See the Pen BEM Demo by 輕鍵快碼 (@xrr2016) on CodePen.

常用CSS class名

包裹類： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block

狀態類： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading

尺寸類： large, middle, small, bigger, smaller

元件類： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

位置類： first, last, current, prev, next, forward, back

文字類： title, desc, content, date, author, category，label，tag

人物類： avatar, name, age, post, intro

結語

BEM 不是必須的，你依然可以選擇自己喜歡的方式編寫，組織你的 CSS 程式碼。使用 BEM 主要目的是為了在團隊開發中有一個統一的規範，更利於程式碼的維護，在別人接手你的程式碼，或者接手別的程式碼時能夠更加快速的理解程式碼。

參考

Get BEM

BEM

BEM思想之徹底弄清BEM語法

什麼鬼，又不知道怎麼命名class了

相關文章