什么是BEM？
BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。
Block
Block是逻辑和功能独立的单元，类似于组件。每个block包含自身的行为（js）、结构（HTML模板）、表现（css）。block的独立性有利于代码的复用，有利于项目管理。
Block特点
1.block名描述block功能 ("What is it?" — menu or button), 不包含其状态 ("What does it look like?" — red or big)。block可以嵌套、复用。
block可以嵌套，并且可以嵌套任意多个block
2.block不影响自身布局，也就是说不能设置margin和position属性。
3.不能在BEM中使用元素选择器和ID选择器。
Element
Element 是block的组成部分，并且不能脱离block使用。
Element特点
1.element表示其目的( item, text, etc.), 而不是其状态( red, big, etc.).
2.Element的命名方式：block-name__element-name. element名字和block名字以双下划线分开。
Element用法——嵌套
Elements 可以相互嵌套，并且嵌套数量任意。element只能是block的一部分，也就是说element的命名层级不能是block__elem1__elem2。
block决定了命名空间，确保elements不被其他block影响。
block中的element在css中不需要跟block一起使用，而是独立定义规则。这样，当修改bolck的结构时不需要修改css。
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}The block's structure changes, but the rules for the elements and their names remain the same.
Element与block的关系
elementy只能作为block的一部分使用,不能独立使用。
block不一定含有element。
何时用Element何时用block
使用block: If a section of code might be reused and it doesn't depend on other page components being implemented.
创建element：If a section of code can't be used separately without the parent entity (the block).
Modifier
Modifier定义block和element的外观,状态,或者行为。
Modifier 特征
Modifier表示其表现("What size?" or "Which theme?" and so on — size_s or theme_islands), 其状态 ("How is it different from the others?" — disabled, focused, etc.) 和其行为 ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
modifier命名方法：以单下划线与block 或者 element 隔开。
modifier类型：Boolean
modifier类型：Key-value
modifier不能单独使用
文件组织结构
BEM理论也可以应用到工程目录的组织架构中。blocks, elements, 和 modifiers将分开为独立的文件。
Features:
1.A single block corresponds to a single directory.
2.The block and the directory have the same name. For example, the header block is in the header/ directory, and the menu block is in the menu/ directory.
3.A block's implementation is divided into separate technology files. For example, header.css and header.js.
4.The block directory is the root directory for the subdirectories of its elements and modifiers.
5.Names of element directories begin with a double underscore (__). For example, header/__logo/ and menu/__item/.
6.Names of modifier directories begin with a single underscore (_). For example, header/_fixed/ and menu/_theme_islands/.
7.Implementations of elements and modifiers are divided into separate technology files. For example, header__input.js and 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参考更多