【譯】前端BEM命名方法論之一：BEM 官方簡(jiǎn)介文檔
【譯】前端BEM命名方法論之三：命名慣例

重要概念

• Block（塊，并不是平常說的塊級(jí)元素中的塊，而是指模塊、組件）
• Element（元素 ）
• Modifier（修飾符 ）
• BEM entity（BEM 實(shí)體）
• Mix（混合體）
• BEM tree（BEM 樹 ）
• Block implementation（塊實(shí)現(xiàn) ）
• Block implementation technology （塊實(shí)現(xiàn)技術(shù) ）
• Block redefinition （塊重定義 ）
• Redifinition level（重定義等級(jí) ）

1. Block(塊)

Block 是一個(gè)邏輯上和功能上獨(dú)立的頁面組件，等同于網(wǎng)頁組件中的部件（等同于網(wǎng)頁中的組件）。Block 封裝了行為（Javascript）、模板、樣式（CSS）和其他實(shí)現(xiàn)技術(shù)。獨(dú)立狀態(tài)的 Block 可供復(fù)用，并且促進(jìn)項(xiàng)目開發(fā)和維護(hù)。

Block 的特點(diǎn)

嵌套式的構(gòu)造

Block 可以被嵌套到任何其他 block 里面去。例如，一個(gè)頭部 block 可以包含一個(gè) logo、一個(gè)搜索表單和一個(gè)登錄 block。

Paste_Image.png

隨意放置

Block 可以在一個(gè)頁面內(nèi)任意移動(dòng)，也可以在頁面之間或項(xiàng)目之間移動(dòng)。Block 作為獨(dú)立的實(shí)體來實(shí)現(xiàn)，這使得在頁面上改變 block 的位置 并確保其功能和外觀一切正常 成為可能。

因此，即使不修改 block 的 CSS 和 Javascript 代碼，logo 和 登錄表單 也可以到處切換（譯者注：即 logo 和 登錄表單 可以用在各個(gè)頁面各個(gè)項(xiàng)目中）。

Paste_Image.png

Paste_Image.png

可復(fù)用

一個(gè)界面可以包含同一個(gè) block 的幾個(gè)實(shí)例。

Paste_Image.png

2. Element(元素)

Element 是一個(gè) block 的組成部分，它不能被拿到 block 的外面使用。例如，一個(gè)菜單項(xiàng)（a menu item ）不會(huì)在一個(gè)菜單塊（a menu block ）范圍之外使用，因此它是一個(gè)元素（element）。

Paste_Image.png

什么時(shí)候應(yīng)該用 block？什么時(shí)候應(yīng)該用 element？（A block or an element: when should I use which? ）

BEM 方法論不推薦大家在element 內(nèi)使用 element（Using elements within elements is not recommended by the BEM methodology ）

3. Modifier(修飾符)

Modifier 是一個(gè) BEM 實(shí)體，它定義了一個(gè) block 或 element 的外觀和行為。

Modifier 可用也可不用（即不一定要用到 modifier）。

Modifier 本質(zhì)上與 HTML 的屬性很相似。同一個(gè) block 會(huì)因?yàn)?modifier 的使用而 看起來與之前有所不同。

例如，菜單塊（the menu block ）的外觀可能會(huì)因?yàn)樵谒砩嫌昧艘粋€(gè) modifier 而改變。

Paste_Image.png

4. BEM entity（BEM 實(shí)體）

Block,element 和 modifier 合起來就被成為 BEM entity。它是一個(gè) 既可以用來指代單獨(dú)的 BEM 實(shí)體又可以作為 block、element 和 modifier 的總稱的 概念。

5. Mix(混合體)

Mix 是被托管在（being hosted on）一個(gè)單獨(dú)的 DOM 節(jié)點(diǎn)上的 不同 BEM 實(shí)體（混合而成）的一個(gè)實(shí)例。
Mix 允許我們：

• 把幾個(gè) BEM 實(shí)體的功能（behavior）和樣式 組合在一起，同時(shí)避免重復(fù)代碼
• 在現(xiàn)有的 BEM 實(shí)體的基礎(chǔ)上 創(chuàng)建語義上的新界面組件。讓我們想一下這種 mix 情形：把一個(gè) block 與 另一個(gè) block 的一個(gè) element 組合在一起。

我們假設(shè)，項(xiàng)目里的鏈接（links）通過一個(gè)鏈接塊（a link block）來實(shí)現(xiàn)。我們需要把菜單項(xiàng)（menu items ）格式化成鏈接（links）。這里有幾種實(shí)現(xiàn)方法：

• 創(chuàng)建一個(gè) 可以把菜單項(xiàng)（item）轉(zhuǎn)變成鏈接（link）的 modifier。實(shí)現(xiàn)這樣一個(gè) modifier 即必然牽涉到 復(fù)制鏈接塊的功能和樣式。這樣一來就會(huì)導(dǎo)致代碼重復(fù)。
• 取一個(gè) 把一個(gè)通用的鏈接塊（link block ）與一個(gè)菜單塊的一個(gè)鏈接元素（a link element ） 組合在一起的 mix。兩個(gè) BEM 實(shí)體的混合體（mix）可以讓我們不用復(fù)制代碼，就可以使用鏈接塊的基本鏈接功能 和 菜單塊的 CSS 規(guī)則。

6. BEM tree(BEM 樹)

BEM tree 是網(wǎng)頁結(jié)構(gòu)在 block、element 和 modifier 方面的表示（representation）。這是一個(gè)在 DOM 樹之上的抽象概念，它描述了 BEM 實(shí)體的名稱、它們的狀態(tài)、順序、嵌套和輔助數(shù)據(jù)。在現(xiàn)實(shí)生活中的項(xiàng)目，BEM tree
可以呈現(xiàn)在任何支持樹結(jié)構(gòu)的形式（format）中。

讓我們看一下 DOM 樹的一個(gè)例子：

<header class="header">
<img class="logo">
<form class="search-form">
<input type="input">
<button type="button"></button>
</form>
<div class="lang-switcher"></div>
</header>

對(duì)應(yīng)的 BEM tree 看起來是這樣子的：

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

在 XML 和 BEMJSON 格式中，該 BEM tree 則是這樣的：

XML

<block:header>
    <block:logo/>
    <block:search-form>
        <block:input/>
        <block:button/>
    </block:search-form>
    <block:lang-switcher/>
</block:header>

BEMJSON

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

7. Block implementation(BEM 實(shí)現(xiàn))

Block implementation 是指一組各不相同的 技術(shù)，這些技術(shù)決定著 BEM 實(shí)體以下幾方面：

• 行為/功能（behavior）
• 外觀
• 測(cè)試
• 模板
• 文檔（documentation）
• 依賴描述
• 附加數(shù)據(jù)（例如：圖片）

8. Implementation technology(實(shí)現(xiàn)技術(shù))

Implementation technology 是一種用于實(shí)現(xiàn) 一個(gè) block 的技術(shù)。Block 可以用一種或多種技術(shù)來實(shí)現(xiàn)，例如：

• 行為/功能（behavior）-- JavaScript, CoffeeScript
• 外觀-- CSS, Stylus, Sass
• 模板-- BEMHTML, BH, Jade, Handlebars, XSL
• 文檔（documentation）-- Markdown, Wiki, XML

例如，如果一個(gè) block 的外觀是用 CSS 來定義的，這意味著 block 是用 CSS 技術(shù)實(shí)現(xiàn)的。同樣地，如果一個(gè) block 的文檔是用 Markdown 格式寫的，block 就是用 Markdown 技術(shù)來實(shí)現(xiàn)的。

9. Block redefinition(block 重定義)

Block implementation 是指通過在不同的層級(jí)上增加新的功能到 block 來修改 block。

10. Redefinition level（重定義級(jí)別）

Redefinition level 是指一組 BEM 實(shí)體和它們的部分實(shí)現(xiàn)。

一個(gè) block 的最終實(shí)現(xiàn) 可以被分成 不同的重定義層級(jí)。每一個(gè)新的層級(jí)都會(huì)擴(kuò)展或覆蓋原始的 block implementation。最終的結(jié)果由 來自所有按照預(yù)設(shè)的連續(xù)的順序排列的重定義層級(jí)的獨(dú)立的 block implementation technologies 組合而成。
任何 BEM 的實(shí)現(xiàn)技術(shù)都可以被重新定義。

例如，有一個(gè)連接到項(xiàng)目的第三方庫(kù)。這個(gè)庫(kù)包含現(xiàn)成的 block implementation。該項(xiàng)目指定的 block 保存在一個(gè)另一個(gè)重定義層級(jí)。比方說（Let's say ），我們需要修改這個(gè)庫(kù)里的某一個(gè) block 的外觀。這并不需要在庫(kù)的源代碼里修改 block 的 CSS 規(guī)則 或者 在項(xiàng)目里復(fù)制代碼。我們只需在項(xiàng)目里為 那一個(gè) block 創(chuàng)建額外的 CSS 規(guī)則。在生成過程中，所產(chǎn)生的實(shí)現(xiàn) 將會(huì)結(jié)合 來自庫(kù)的原始規(guī)則 與 來自項(xiàng)目的新樣式。（原文喜歡用 library level 和 project level，但翻譯的時(shí)候，直接理解為 library 和 project 就好）