概要

從狹義上來講，BEM就是一套CSS的命名規則，將CSS的命名分解為 Block, Element, Modifier 三個部分，即 塊（block）、元素（element）、修飾符（modifier）。它是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明且更有實際的意義。BEM命名約定更加嚴格，而且包含更多的資訊，它們主要用於團隊開發一個耗時的大專案。

塊Block

頁面上邏輯與功能獨立的元件等同於 Wwb 元件。一個塊中，封裝了行為（JavaScript）,模板，樣式（CSS）和其它一些實現技術。一個獨立的塊可以被重用，以及推進專案的開發與維護。
一個塊可以巢狀在另一個塊中。比如，一個head塊可以包含一個標識（logo），一個導航選單（nav）和一個使用者資訊塊（profile）。

元素Element

不能用於塊之外的組成成分。例如一個選單項（menu item）不能在一個選單塊（menu block）外面使用，所以他是一個元素。

修飾語Modifier

一個 BEM 實體定義了一個塊或者元素的外觀與行為。
修飾語的使用並不是必須的。
修飾語本質與與 HTML 的屬性（attribute）相似。同樣的塊因為使用了修飾語而變得不一樣了。
比如，選單塊（menu）外觀的改變依賴於他使用的修飾語。

BEM樹

一個頁面在結構方面表現為許多的塊，元素與修飾語。這是 DOM 樹的一種抽象表示，用來描述 BEM 實體的名稱，狀態，順序，巢狀與輔助資料。在實際專案中，BEM 樹可以用任意的格式描述，但推薦使用樹型結構。假設有一個這樣的 DOM 樹：

<header class="header">
    <img class="logo">
    <form class="search-form">
        <input type="input">
        <button type="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">ru</a>
        </li>
    </ul>
</header>
 

類似的 BEM 樹看起來可能是這樣：

header
    ├──logo
    └──search-form
        ├──input
        └──button
    └──lang-switcher
        └──lang-switcher__item
            └──lang-switcher__link
        └──lang-switcher__item
            └──lang-switcher__link

BEMJSON：

{
    block: 'header',
    content : [
        { block : 'logo' },
        {
            block : 'search-form',
            content : [
                { block : 'input' },
                { block : 'button' }
            ]
        },
        {
            block : 'lang-switcher',
            content : [
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }  
                    ]
                },
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }
                    ]
                }
            ]
        }
    ]
}