BEM

基於元件方式的web開發方法，基本思想是將使用者介面分成獨立的模組。

Block（塊）

（通常指模組，元件）

Block 是一個邏輯上和功能上獨立的頁面元件，等同於網頁元件中的部件（等同於網頁中的元件）。Block 封裝了行為（Javascript）、模板、樣式（CSS）和其他實現技術。獨立狀態的 Block 可供複用，並且促進專案開發和維護。

內容

• 模組名稱：描述了它的目的（“它是什麼？” —— 選單或者按鈕），而不是它的狀態（“它看起來是什麼樣子？” —— 紅色或者大的）。
• 模組不應該影響它所在的環境，這意味著你不應該為模組設定會影響到外部的形狀（影響大小的 padding 或邊框）和定位
• 你也不應該在使用 BEM 的時候使用 CSS 標籤選擇器和 ID 選擇器

使用

巢狀關係
- 模組與模組之間可以彼此巢狀
- 你可以有任意級別的巢狀層次

<!-- 'head' 模組 -->
<header class="header">
    <!-- 巢狀 'logo' 模組 -->
    <div class="logo"></div>

    <!-- 巢狀 'search-form' 模組 -->
    <form class="search-form"></form>
 

</header>

特點

1、巢狀式的構造

Block 可以被巢狀到任何其他 block 裡面去。例如，一個頭部 block 可以包含一個 logo、一個搜尋表單和一個登入 block。

2、隨意放置

Block 可以在一個頁面內任意移動，也可以在頁面之間或專案之間移動。Block 作為獨立的實體來實現，這使得在頁面上改變 block 的位置 並確保其功能和外觀一切正常 成為可能。

3、可複用

一個介面可以包含同一個 block 的幾個例項。

Element（元素）

內容

<h2 id="element"
 
>元素</h2>

元素（Element）是一個模組（block）的組成部分，且不能脫離模組單獨地被使用。例如，一個選單項（a menu item ）不會在一個選單塊（a menu block ）範圍之外使用，因此它是一個元素（element）。

• 元素名稱：描述了它的目的（用處）（“這是什麼？” —— item，text，等等。），而不是它的狀態（“什麼型別的，或者它看起來是什麼樣的？” —— 紅色，大的，等等。）
• 完整的元素名的結構是 block-name__element-name。元素的名字與模組的名字使用雙下劃線分隔（__）

使用

1、巢狀關係
- 元素之間可以彼此巢狀
- 你可以擁有任意層次的巢狀級別
- 一個元素總是一個模組的一部分，而不是另一個元素的一部分，這意味著元素的名稱不能被定義為 block__elem1__elem2 這樣的層次結構。

<!--
     正確的。完整的元素名的結構符合如下模式：
     'block-name__element-name'
 -->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input"/>
        <button class="search-form__button"></button>
    </div>
</form>

 <!--
     不正確的。完整的元素名的結構不符合如下模式：
     'block-name__element-name'
 -->
<form class="search-form">
    <div class="search-form__content">
        <!-- 推薦：'search-form__input' 或者 'search-form__content-input' -->
        <input class="search-form__content__input"/>
        <!-- 推薦：'search-form__button' 或者 'search-form__content-button' -->
        <button class="search-form__content__button"></button>
    </div>
</form>

如果在模組名稱上定義了名稱空間，也要保證元素名稱是依賴於模組的（block_elem）。
在 DOM 樹中，一個模組可以有元素巢狀結構：

<div class="block">
    <div class="block_elem1">
        <div class="block_elem2">
            <div class="block_elem3"></div>
        </div>
    </div>
</div>

在 BEM 的方法論中，這樣的模組結構通常表示為一個並列的元素列表：

.block {}
.block_elem1 {}
.block_elem2 {}
.block_elem3 {}

你可以在不改變每個單獨的元素的情況下改變一個模組的 DOM 結構：

<div class="block">
    <div class="block_elem1">
        <div class="block_elem1"></div>
    </div>
    <div class="block_elem3"></div>
</div>

2、組成部分
一個元素總是一個模組的一部分，不可以單獨使用

<!-- 正確的。元素都位於 'search-form' 模組內 -->
<!-- 'search-form' 模組 -->
<form class="search-form">
    <!-- 在 'search-form' 模組內的 'input' 元素 -->
    <input class="search-form__input" />
    <!-- 在 'search-form' 模組內的 'button' 元素 -->
    <button class="search-form__button"></button>
</form>

<!-- 不正確的。元素位於 'search-form' 模組的上下文之外 -->
<!-- 'search-form' 模組 -->
<form class=""search-block>
</form>

<!-- 在 'search-form' 模組內的 'input' 元素 -->
<input class="search-form__input"/>

<!-- 在 'search-form' 模組內的 'button' 元素 -->
<button class="search-form__button"></button>

3、可選性
一個元素是一個可選的模組元件。並不是所有的模組都必須有元素。

<!-- 'search-form' 模組 -->
<div class="search-form">
    <!-- 'input' 模組 -->
    <input class="input"/>

    <!-- 'button' 模組 -->
    <button class="button"></button>
</div>

①如果這段程式碼可能被重用，並且它不依賴於頁面上的其他元件，那你應該建立一個模組。

②如果這段程式碼在沒有父實體（模組）的情況下不能使用，那你應該建立一個元素。

③為了簡化開發，元素應該被分割成一小部分-子元素。在 BEM 方法論中，你不能建立元素的元素，在這種情況下，你需要建立一個服務模組，而不是建立一個元素。

Modifier（修飾符）

Modifier 是一個 BEM 實體，它定義了一個 block 或 element 的外觀和行為。
Modifier 可用也可不用（即不一定要用到 modifier）。
Modifier 本質上與 HTML 的屬性很相似。同一個 block 會因為 modifier 的使用而 看起來與之前有所不同。
例如，選單塊（the menu block ）的外觀可能會因為在它身上用了一個 modifier 而改變。

內容

一種用於定義模組和元素的外觀，狀態和行為的實體。
- 修飾符的名稱：描述了它的外觀（“多大？”或者“它的主題是什麼？”等等—— size_s 或者 theme_islands），它的狀態（“它與其他有什麼不同？” —— disabled，focused，等等）以及他的行為（“它的行為什麼？”或者“它如何響應使用者？”——比如 directions_left-top）。
- 修飾符的名字與模組或者元素的名字使用單下劃線分隔（_）

修飾符的型別

1、Boolean
- 當修飾符的存在或不存在是重要的，與它的值無關時使用這種型別的修飾符。比如：disabled。如果一個布林型別的修飾符是可見的，它的值被假定為 true。
- 修飾符的全名的結構遵循如下模式：
- Modifier（修飾符 ）

block-name_modifier_name

block-name__element-name_modifier-name

<!-- 'search-form' 模組有一個 ‘focused’ 的布林型別的修飾符 -->
<form class="search-form search-form_focused">
    <input class="search-form__input"/>

    <!-- 'button' 元素有一個 'disabled' 的布林型別修飾符 -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

2、鍵-值
- 當修飾符的值是重要的使用鍵值對型別。

“一個 islands 設計主題的按鈕”：menu_theme_islands
- 這種型別的修飾符的全名的結構遵循如下模式：
block-name_modifier-name_modifier-value

block-name__element-name_modifier-name_modifier-value

<!-- The `search-form` 模組有值為 'islands' 的 `theme` 修飾 -->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- The `button` 元素有值為 'm' 的 `size` 修飾 -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

<!-- 你不能同時使用兩個具有不同值的的相同修飾符 -->
<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">

    <input class="search-form__input">

    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
        Search
    </button>
</form>

使用

一個修飾符不能被單獨使用。
- 從 BEM 的角度，一個修飾符不能脫離模組或元素而被使用。一個修飾符應該改變實體的外觀，行為或者狀態，而不是替換它。

<!-- 正確的。'search-form' 模組有值為 'islands' 的 'theme' 修飾符 -->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Search</button>
</form>

<!-- 不正確的。'search-form' 丟失了 -->
<form class="search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Search</button>
</form>

混合模式：一種在單一的 DOM 節點上使用不同 BEM 實體的技術

混合模式允許
- 結合多個實體的行為和樣式，而不是重複編寫程式碼
- 在現有程式碼的基礎上建立具有新語義的UI元件

<!-- 'header' 模組 -->
<div class="header">
    <!--
        將 'header' 模組的 'search-form' 元素與 'search-form' 模組混合在一起使用
    -->
    <div class="search-form header__search-form"></div>
</div>

在這個例子中，我們將 header 模組的 search-form 元素與 search-form 模組的行為和樣式結合在一起。這種方式允許我們在 header__search-form 元素上設定額外的形狀和定位，而 search-form 模組仍然是通用的。因此，我們可以在任何環境中使用模組，因為模組沒有指定任何填充。這正是我們可以獨立呼叫模組的原因。

檔案系統：在 BEM 方法論中採用的元件概念同樣適用於專案的檔案結構中。模組、元素和修飾符的實現可以被分在獨立的檔案中，這意味著，我們單獨地使用它們。
- 一個單獨的模組對應一個單獨的目錄
- 模組和其對應的目錄擁有相同的名字。比如， header 模組放置在 header/ 目錄中，menu 模組放置在 menu/ 目錄中。
- 一個模組的實現分為單獨的檔案。比如， header.css 和 header.js。
- 模組目錄是其元素和修飾所在目錄的根目錄。
- 元素目錄的名稱以雙下劃線（__）開始。比如，header/__logo/ 和 menu/__item。
- 修飾目錄的名稱以單下劃線（_）開始。比如，header_fixed 和 menu/_theme_islands/。
- 元素和修飾的實現分為不同的檔案。比如，header__input.js 和 header_theme_islands.css。

search-form/                           # Directory of the search-form

    __input/                           # Subdirectory of the search-form__input
        search-form__input.css         # CSS implementation of the
                                       # search-form__input element
        search-form__input.js          # JavaScript implementation of the
                                       # search-form__input element

    __button/                          # Subdirectory of the search-form__button element
        search-form__button.css
        search-form__button.js

    _theme/                            # Subdirectory of the search-form_theme modifier
        search-form_theme_islands.css  # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # islands
        search-form_theme_lite.css     # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # lite

search-form.css                        # CSS implementation of the search-form block
search-form.js                         # JavaScript implementation of the
                                       # search-form block

這樣的檔案結構可以很好地支援我們重用程式碼。

BEM entity（BEM 實體）

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

Mix（混合體）

Mix 是被託管在（being hosted on）一個單獨的 DOM 節點上的 不同 BEM 實體（混合而成）的一個例項。

Mix允許我們
- 把幾個 BEM 實體的功能（behavior）和樣式 組合在一起，同時避免重複程式碼
- 在現有的 BEM 實體的基礎上 建立語義上的新介面元件。讓我們想一下這種 mix 情形：把一個 block 與 另一個 block 的一個 element 組合在一起。

我們假設，專案裡的連結（links）通過一個連結塊（a link block）來實現。我們需要把選單項（menu items ）格式化成連結（links）。這裡有幾種實現方法：
- 建立一個 可以把選單項（item）轉變成連結（link）的 modifier。實現這樣一個 modifier 即必然牽涉到 複製連結塊的功能和樣式。這樣一來就會導致程式碼重複。
- 取一個 把一個通用的連結塊（link block ）與一個選單塊的一個連結元素（a link element ） 組合在一起的 mix。兩個 BEM 實體的混合體（mix）可以讓我們不用複製程式碼，就可以使用連結塊的基本連結功能 和 選單塊的 CSS 規則。

BEM tree（BEM 樹 ）

BEM tree 是網頁結構在 block、element 和 modifier 方面的表示（representation）。這是一個在 DOM 樹之上的抽象概念，它描述了 BEM 實體的名稱、它們的狀態、順序、巢狀和輔助資料。在現實生活中的專案，BEM tree可以呈現在任何支援樹結構的形式（format）中。

一個DOM樹

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

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' }
    ]
}

Block implementation（BEM實現 ）

Block implementation 是指一組各不相同的 技術，這些技術決定著 BEM 實體以下幾方面：
- 行為/功能（behavior）
- 外觀
- 測試
- 模板
- 文件（documentation）
- 依賴描述
- 附加資料（例如：圖片）

Implementation technology（實現技術）

Implementation technology 是一種用於實現一個 block 的技術。Block 可以用一種或多種技術來實現，例如：
- 行為/功能（behavior）– JavaScript, CoffeeScript
- 外觀– CSS, Stylus, Sass
- 模板– BEMHTML, BH, Jade, Handlebars, XSL
- 文件（documentation）– Markdown, Wiki, XML

例如，如果一個 block 的外觀是用 CSS 來定義的，這意味著 block 是用 CSS 技術實現的。同樣地，如果一個 block 的文件是用 Markdown 格式寫的，block 就是用 Markdown 技術來實現的。

Block redefinition（塊重定義）

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

Redifinition level（重定義等級）

Redefinition level 是指一組 BEM 實體和它們的部分實現。

一個 block 的最終實現 可以被分成 不同的重定義層級。每一個新的層級都會擴充套件或覆蓋原始的 block implementation。最終的結果由 來自所有按照預設的連續的順序排列的重定義層級的獨立的 block implementation technologies 組合而成。
任何 BEM 的實現技術都可以被重新定義。

例如，有一個連線到專案的第三方庫。這個庫包含現成的 block implementation。該專案指定的 block 儲存在一個另一個重定義層級。比方說，我們需要修改這個庫裡的某一個 block 的外觀。這並不需要在庫的原始碼裡修改 block 的 CSS 規則 或者 在專案裡複製程式碼。我們只需在專案裡為 那一個 block 建立額外的 CSS 規則。在生成過程中，最終實現將會結合庫級別的原有規則和專案級別中新的樣式規則。