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

爲何須要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;
}
複製代碼

示例

這樣的卡片是一個單獨的塊

<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了