塊
==特征==
The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big)
塊名稱描述了它的用途(“它是什么?”-菜單或按鈕)，而不是它的狀態(tài)(“它看起來像什么?”-紅色或大的)。
<!--正確示例-->
<div class="error"></div>
<!--錯誤示例-->
<div class="red-text"></div>
使用規(guī)則
塊可以嵌套塊
可以嵌套任意的塊
<header class="header">
<div class="logo"></div>
<form class="search-form"></form>
</header>
元素
屬于塊的一部分,不能單獨使用
==特征==
元素名稱描述了它的用途(“它是什么?”-菜單或按鈕)，而不是它的狀態(tài)(“它看起來像什么?”-紅色或大的)。
命名規(guī)范block-name__element-name
<!-- `search-form` 塊 -->
<form class="search-form">
<!-- 這是`search-form` 塊的元素`input` -->
<input class="search-form__input">
<!-- 這是`search-form` 塊的元素`button` -->
<button class="search-form__button">Search</button>
</form>
使用規(guī)則
元素里面可以嵌套元素
始終是塊里面的成員（不能單獨使用）
塊里面可以沒有元素
可嵌套
<div class="block">
<div class="block__elem1">
<div class="block__elem2">
<div class="block__elem3"></div>
</div>
</div>
</div>
成員
<!-- 這樣單獨使用元素是錯的-->
<button class="search-form__button">Search</button>
可選
<!--這些塊里面都沒有元素-->
<div class="search-form">
<input class="input">
<button class="button">Search</button>
</div>
應(yīng)該創(chuàng)建塊還是元素？
創(chuàng)建一個塊
如果一段代碼可能被重用，并且它不依賴于正在實現(xiàn)的其他頁面組件。
創(chuàng)建一個元素
如果一段代碼不能單獨使用，或者沒有父實體(塊)就不能使用。
修飾符
==特征==
該修改名稱描述其外觀（“多大？”或者“哪個主題？”等等- size_s或theme_islands）其狀態(tài)（“它和其它的塊（元素）有什么不同？” - disabled，focused等），其行為（“如何它的行為是什么？“或”它如何響應(yīng)用戶？“ - 例如directions_left-top）。
修飾符名稱通過單個下劃線（_）與塊或元素名稱分隔。
布爾類型
僅在修飾符的存在或不存在很重要時使用，并且其值無關(guān)緊要。例如，disabled。如果存在布爾修飾符，則假定其值為true。
-
修飾符全名的結(jié)構(gòu)遵循以下模式：
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>
鍵值對類型
在修飾符值很重要時使用。例如，“具有islands設(shè)計主題的菜單”：menu_theme_islands。
-
修飾符全名的結(jié)構(gòu)遵循以下模式：
- block-name_modifier-name_modifier-value
- block-name__element-name_modifier-name_modifier-value
<!-- `search-form` 塊的修飾符是 `theme` 它的值為 `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<!-- `button` 元素的修飾符是 `size` 它的值為 `m` -->
<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">
</button>
</form>
修飾符使用規(guī)則
- 修飾符不能單獨使用
<!--這是正確的，存在`search-form`塊，有`theme`修飾符，它的值為islands-->
<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>
混合
<!-- `header` block -->
<div class="header">
<!--
The `search-form` block is mixed with the `search-form` element
from the `header` block
-->
<div class="search-form header__search-form"></div>
</div>
文件格式
==特征==
單個塊對應(yīng)于單個目錄。
塊和目錄具有相同的名稱。例如，header塊位于header/目錄中，menu塊位于menu/目錄中。
塊的實現(xiàn)分為單獨的技術(shù)文件。例如，header.css和header.js。
塊目錄是其元素和修飾符的子目錄的根目錄。
元素目錄的名稱以雙下劃線（__）開頭。例如，header/__logo/和menu/__item/。
修飾符目錄的名稱以單個下劃線（_）開頭。例如，header/_fixed/和menu/_theme_islands/。
元素和修飾符的實現(xiàn)分為單獨的技術(shù)文件。例如，header__input.js和header_theme_islands.css。
search-form/ # 塊目錄 search-form
__input/ # 元素目錄 search-form__input
search-form__input.css # 實現(xiàn)search-form__input元素的css文件
search-form__input.js # 實現(xiàn)search-form__input元素的js文件
__button/ # 元素目錄 search-form__button
search-form__button.css
search-form__button.js
_theme/ # 修飾符目錄 search-form_theme
search-form_theme_islands.css # 實現(xiàn)search-form_theme_islands的css文件
search-form_theme_lite.css # 實現(xiàn)search-form_theme_islands的css文件
search-form.css # 實現(xiàn)search-form塊的css文件
search-form.js # 實現(xiàn)search-form塊的js文件
