块
==特征==
The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big)
块名称描述了它的用途(“它是什么?”-菜单或按钮)，而不是它的状态(“它看起来像什么?”-红色或大的)。
<!--正确示例--><div class="error"></div><!--错误示例--><div class="red-text"></div>
使用规则
块可以嵌套块
可以嵌套任意的块
<header class="header"><div class="logo"></div><form class="search-form"></form></header>
元素
属于块的一部分,不能单独使用
==特征==
元素名称描述了它的用途(“它是什么?”-菜单或按钮)，而不是它的状态(“它看起来像什么?”-红色或大的)。
命名规范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>
使用规则
元素里面可以嵌套元素
始终是块里面的成员（不能单独使用）
块里面可以没有元素
可嵌套
<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>
应该创建块还是元素？
创建一个块
如果一段代码可能被重用，并且它不依赖于正在实现的其他页面组件。
创建一个元素
如果一段代码不能单独使用，或者没有父实体(块)就不能使用。
修饰符
==特征==
该修改名称描述其外观（“多大？”或者“哪个主题？”等等- size_s或theme_islands）其状态（“它和其它的块（元素）有什么不同？” - disabled，focused等），其行为（“如何它的行为是什么？“或”它如何响应用户？“ - 例如directions_left-top）。
修饰符名称通过单个下划线（_）与块或元素名称分隔。
布尔类型
仅在修饰符的存在或不存在很重要时使用，并且其值无关紧要。例如，disabled。如果存在布尔修饰符，则假定其值为true。
修饰符全名的结构遵循以下模式：
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设计主题的菜单”：menu_theme_islands。
修饰符全名的结构遵循以下模式：
- 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-formsearch-form_theme_islandssearch-form_theme_lite"><input class="search-form__input"><button class="search-form__buttonsearch-form__button_size_ssearch-form__button_size_m"></button></form>
修饰符使用规则
- 修饰符不能单独使用
<!--这是正确的，存在`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` elementfrom the `header` block--><div class="search-form header__search-form"></div></div>
文件格式
==特征==
单个块对应于单个目录。
块和目录具有相同的名称。例如，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/ # 块目录 search-form__input/ # 元素目录 search-form__inputsearch-form__input.css # 实现search-form__input元素的css文件search-form__input.js # 实现search-form__input元素的js文件__button/ # 元素目录 search-form__buttonsearch-form__button.csssearch-form__button.js_theme/ # 修饰符目录 search-form_themesearch-form_theme_islands.css # 实现search-form_theme_islands的css文件search-form_theme_lite.css # 实现search-form_theme_islands的css文件search-form.css # 实现search-form块的css文件search-form.js # 实现search-form块的js文件