BEM是Block, Element, Modifier。
一種class的命名習慣。在這種CSS方法學中，一個block就是一個component的頂級抽象，例如一個button: .btn { }。這裏的block應該被當作是一個parent，child
items 或者elements, 可以被放在block裏面，然後 用在block 名字的後面加兩個下劃線的方式來表明，例如：.btn__price { }
最後，modifier可以用來操作block, 這樣我們就可以style 特定的component， 而且不會給完全不相關的module 造成影響。modifier用兩個加在block 名字後面的hyphens(連字符)來表示，例如：btn--orange。
如果另一個developer寫了這個markup, 並且我們對CSS也不太熟悉，我們仍然有很好的辦法去區分哪些classes 是負責什麼的和它們之間是怎麼互相依賴的。接下來developer就可以build它們自己的components或者修改已經存在的block，去構建它們想要的內容。不用寫太多的CSS，用這些在markup裏面的class, developer就可以簡單的創建許多不同的組合。
爲什麼我們應該考慮BEM？
- 如果我們想要爲一個component創建一個新的style, 我們可以更容易的發現哪個modifiers 和 children 已經存在。我們有可能甚至不需要添加任何的CSS ，因爲這裏說不定已經有了一個就是我們想要的pre-exsiting modifier。
- 如果我們只讀markup，不讀CSS，我們也能夠快讀的get 到 哪個element 依賴於其它哪些東西（在前面的例子裏面，我們可以看到，
.btn__pricedepends on.btn即使我們不知道它現在是做什麼的）
設計師和developer可以一致的去命名components，因爲團隊成員的溝通交流變得更簡單了。換句話說，就是BEM給了每個項目成員一個語法說明，每個人都能更容易的看懂它，並且相互分享。
所以，如果一個developer可以在一個project更加自信的工作，那麼它們就會更加確定去做一些更聰明的決定，關於這些視覺component如何被使用的。對於這些小的ailments(疾病)來說，這個方法學或許不是一個完美的解決方案，但是他必定給了developer一個標準，在將來怎樣去寫更好，可操作性更強的code。
關於BEM，另一個聰明的部分就是everything is a class and nothing is nested. 這樣使得CSS的特性變的非常扁平和單一，這是一個好想法。這意味着你最終不會因爲這種差異性和自己鬥爭。
讓我們來看看一些和BEM相關的問題。
Problems with BEM CSS
當然，如果你打破了BEM的規則也沒有人會扭曲你的胳膊。你可以仍然想這樣去寫一個CSS selector:
這段代碼看起來好像只有一部分BEM在進行，但是它不是BEM。他有嵌套的selectors，並且modifier 甚至沒有準確的描述到底發生了什麼事。如果我們這樣做的話，我們會破壞在BEM中非常有用的扁平特性。
一個block(例如: .nav) 應該絕不會重寫其他block或者modifier的styles (例如：.btn—orange)。否則
這將會使它幾乎可以去讀整個HTML，並且會讓我們分不清這個component到底幹了什麼。在這個過程中，我們勢必會使其他developer對代碼庫的信心造成巨大的動搖。
如果你看到下面的markup，你會怎樣認爲呢？
這裏的問題是，在一個完全的block裏面的一個element，有developer需要的code, 但是child elements 沒有像它的parent一樣，require一個.nav class，這就造成了格外confusing和不一致的代碼庫。這是應該不惜任何代價避免的。我們可以總結成以下兩個問題：
- 絕不重寫modifiers 在一個不相關的block裏面。
- 避免一些不必要的parent elements ，當
可以很好的存在的時候。
More examples of BEM in action
Accordion demo
在這個例子中，這裏有一個block,兩個elements和一個modifier。 這裏我們已經可以創建一個.accordion__copy–open modifier可以讓我們知道我們不能夠在其他的block或者element裏面使用它。
Navigation demo
這個navigation demo有一個block，6個elements和0個modifiers, 並且它完全可以去創建blocks在沒有modifiers的情況下。在未來的某個時刻，developer可以總是連接在新的modifiers很久，因爲block會保持不變。
Dislikes of BEM
或許你不喜歡dobule-underscores 或者 double-dashes。沒問題，用其他任何你會堅持使用的特殊字符都可以。
Sass and BEM
你可以寫繼續enjoy嵌套的Sass寫法, 但可以用@at-root得到不嵌套的CSS。
Summary
爲了wrap things up，我認爲很公平的說，雖然BEM沒有解決所有我們的問題，但是它對創建可擴展的構造仍然非常的有用，在團隊每個人應該有一個清晰的idea關於怎樣提高code質量的地方保持了界面。這是因爲一個巨大的前端開發不僅僅是在短期內關於解決一個小問題nice tricks ，我們需要協議，pormises和有約束力的社會契約在developers之間，以便我們的代碼庫可以適應時間的變化。
example: