CSS 命名管理 之 BEM

好吧，將 BEM 簡單的解釋爲 「Block-Element-Modifier「， 實際上是個不負責任的作法。鬼知道 Block 是什麼啊？因此，看了一些似懂非懂的中文解釋以後，本身仍是得去找些英文來讀一讀，順便總結一下。

本人對 HTML、JavaScript、CSS 其實都只是只知其一;不知其二，因此，若是有理解不到位的，還望各位看官斧正。可是，本着「要學就要學最早進」的原則，即便是基礎不紮實，仍是要衝着更有效率的方式前進。

有不想看我羅嗦的看官，能夠直接看下面這篇文檔：

https://css-tricks.com/bem-101/

 

什麼是 BEM

咱們藉助一個實例，來對 BEM 作一下介紹。下面是一個遵守 BEM 規則寫的 CSS：

/* Block */
.btn {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.btn__price {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: .4;
  border-radius: 5px 0 0 5px;
}

/* Element */
.btn__text {
  padding: 0 10px;
  border-radius: 0 5px 5px 0;
}

/* Modifier */
.btn--big {
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.btn--blue {
  border-color: #0074D9;
  color: white;
  background-color: #0074D9;
}

/* Modifier */
.btn--orange {
  border-color: #FF4136;
  color: white;
  background-color: #FF4136;
}

/* Modifier */
.btn--green {
  border-color: #3D9970;
  color: white;
  background-color: #3D9970;
}


body {
  font-family: "fira-sans-2", sans-serif;
  background-color: #ccc;
}

View Code

而後，咱們把它應用到這個頁面上：

<a href="http://git.oschina.net/" class="btn">
  <span class="btn__text">Standard button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--orange btn--big">
  <span class="btn__price">$3</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--blue btn--big">
  <span class="btn__price">$4</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--green btn--big">
  <span class="btn__price">$9</span>
  <span class="btn__text">Big button</span>
</a>

因而，咱們獲得了這樣的結果：

很顯然，這裏的 block 只是被命名爲 btn，而不是 HTML 裏的那個 button 對象； block 只是咱們的一個處理單元，對它的定義貌似沒有特殊要求，甚至它是能夠包含其餘 block 的。那麼，另外一個概念「 Element 」也就呼之欲出了，組成 Block 的，固然就是它的元素。顯然，Element 是針對，也是依賴於 Block 存在的。而 modifier 則是簡單的對 block 某些屬性的重寫。

重中之重！從 CSS 代碼裏面，咱們就能夠看到，element 和 modifier 是從屬於 block的！從哪裏能夠看出來？命名！好吧，只是開個玩笑。在這裏，element 被命名爲 block__ele的形式(btn__txt, btn__price), modifier 則被命名爲 block--mod的形式（btn--orange）；你能夠把鏈接符換成你喜歡的符號，可是「--」，「__」是你們都推薦的。對於同一個 block 的不一樣定製需求，咱們只須要添加新的 modifier 就好，是否是很方便？

 

爲何須要 BEM

固然，寫個小網頁不要緊，反正就那麼幾個控件，你隨便怎麼命名都無所謂。可是，頁面大了，參與的人員多了，命名的識別度、以及一致性就成了大問題；另外一種狀況，假設每一個人都有一套獨立的命名規則，這樣是能夠在很大程度上避免命名污染的，但也走向了另外一個極端 —— CSS 文件變得很龐大。因此，就出現了這樣一類技術，which aimed on reducing CSS codebase and organizing programmers cooperation and maintaining of CSS code。好比，OOCSS，SMACSS，SUITCSS，Atomic CSS等。

那麼，BEM 相比之下的優點在哪裏呢？正如咱們知道的那樣，使用命名管理和不使用命名管理，確定是有本質上的區別的，就像是開汽車和走路同樣；同時，汽車有電動的、汽油的、柴油的等等，還有越野的和普通代步的，適用性和效率差異也是很大的。因此，若是你已經在使用命名管理，那就已是頗有效率了。至於 BEM 的優點，你們衆說紛紜，就我看到的，簡單歸納。首先是命名識別度高，結構清晰。element 和 modifier 與 block 之間的從屬關係，能夠從名稱上就一目瞭然的區分。其次，命名隔離性好。每個 Block 都有一個獨立的空間，很好的控制了對其餘元素的污染。再次，良好的擴展性。若是新的 block 只是和原來的 block 有不一樣的背景顏色，那麼，只須要再建立一個新的 modifier。最後，它能夠很好的和 Javascript （DOM）很好的整合，在針對某個 block 的操做裏，全部元素的名稱都是一致的。

 

僞 BEM

聽說這是應用 BEM 常犯的一個錯誤。這樣的 CSS :

.nav .nav__listItem .btn--orange {
  background-color: green;
}

這樣的 html：

<a class="btn" href="http://css-tricks.com">
  <div class="nav__listItem">Item one</div>
  <div class="nav__listItem">Item two</div>
</a>

雖然看着像是 BEM， 可是，是否是有種神經錯亂的感受？雖然頁面看起來是同樣的，可是。。。我想說，若是是這樣，你仍是按本身想法寫個名字給我猜好了，說不定我還能猜到你寫的啥。因此，而後，又有人給出了這樣的建議：

• Never overriding modifiers in an unrelated block.
• Avoiding making unnecessary parent elements when the child can exist quite happily by itself.

翻譯爲人話就是：結構清晰，嚴格執行 element 和 modifier 與 block 的從屬關係； block 嵌套的層次要儘可能少（他能搞得定，就不要給他再搞個爹）。

 

好吧，另一篇講 BEM 的：

http://www.w3cplus.com/css/bem-definitions.html

這篇也不錯：

http://getbem.com/introduction/

http://nicolasgallagher.com/about-html-semantics-front-end-architecture/