嗯，这是一篇自我的归纳总结
主要参考和翻译了这个网站
介绍
BEM (Block, Element, Modifier) 是一种基于组件的Web开发的方法，他的主要目的是把UI分割成独立的block。这会让整个UI开发既快又简单，并且能提高代码的重用率，而不是简单的复制粘贴。
Block
Block可以理解为一个独立的可以被重复利用的功能组件。在HTML中，是用class这个属性来表示。
几个注意点：
- Block的名称是用来表示这个组件的用处的（简单来说就是用来做什么的，比如菜单menu或者按钮button）而不是用来表示当前这个组件的状态（颜色red，大小big）
<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>
<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>
- Block不应该影响他的外部环境，也就是说你不应该使用margin/position之类东西
- 在使用BEM的时候CSS的tag或者ID选择器也不应该使用
以上这些保证了Block具有必要的独立性，方便他被在各个地方重用。
Element
Element从字面意思理解，就是组成Block的元素。并且不能被单独使用
几个注意点：
- Element的名称需要描述他的使用目的（用来做什么，item或者text）而不是他当前的状态（颜色red，大小big）
- Element的结构的全名是这样表示的block-name__element-name。Element的名称用双下划线（ __ ）来和Block的名称分隔开。
<!-- `search-form` block -->
<form class="search-form">
<!-- `input` element in the `search-form` block -->
<input class="search-form__input">
<!-- `button` element in the `search-form` block -->
<button class="search-form__button">Search</button>
</form>
什么时候用Block，什么时候用Element？
如果一个组件是可以被重用的，并且和其他的组件没有关联（独立使用），可以使用Block。
如果一个组件不能独立使用，必须依赖于他的父组件，则可以用Element。
Modifier
Modifier是用来描述组件外观，状态，行为的。简单来说，就是用来修饰的。
几个注意点：
- Modifier名称用来描述外观（是什么样的大小/主题？ 比如size_s/theme_islands），状态（用来与其他的组件做区别，比如disable，focused，等），行为（行为是怎样？对用户来说的响应是什么？比如directions_left-top）
- Modifier的名称用单下划线（ _ ）来和Block的名称和Element名称分隔开。
Modifier的几种类型
boolean型
当Modifier的值不是很重要，而代码仅仅是关心这个Modifier是否存在的时候，可以使用。当一个Boolean的Modifier出现的时候，他的值默认是true的。
使用时候的结构如下：
block-name_modifier-name
block-name__element-name_modifier-name
举个例子
<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
<input class="search-form__input">
<!-- The `button` element has the `disabled` Boolean modifier -->
<button class="search-form__button search-form__button_disabled">Search</button>
</form>
Key-Value型
当Modifier的值是什么是重要时，比如表示theme的状态：theme_islands的时候，可以使用这种方式。
使用时候的结构如下：
block-name_modifier-name_modifier-value
block-name__element-name_modifier-name_modifier-value
举个例子
<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<!-- The `button` element has the `size` modifier with the value `m` -->
<button class="search-form__button search-form__button_size_m">Search</button>
</form>
<!-- You can't use two identical modifiers with different values simultaneously -->
<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>
