BEM思想
1. 什么是BEM:
BEM:(Block块,Element元素,Modifier修饰符)一种命名规范,
其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。
基本命名模式
block{},
block__element{},
block--modifier{},
2. BEM各元素:
* Block ：Block是逻辑和功能独立的单元，类似于组件。每个block包含自身的行为（js）、结构（HTML模板）、表现（css）。block的独立性有利于代码的复用，有利于项目管理。
特点：
+ block名描述block功能，不包括状态，可以复用，嵌套
+ block不影响自身布局，所以就不能设置margin，position属性
+ 不在Bem中使用元素选择器，和id选择器
+ 在同一页面中不依赖于其他block或element；
例子:
<button class="button" />
<button class="button button--success"/>
<button class="button button--danger"/>
* Element: Element是Block的组成部分，不脱离Block使用，嵌套使用，可嵌套多个数量，相互嵌套
特点：
+ element表示目的(item,text...),而不是状态(red,disabled...)
+ element的命名方式：block-name__element-name,使用双下划线连接block名和element名
例子:
<form class="search-form">
<input class="search-form__input"/>
</form>
与block的联系:
+ block确定命名空间，确保element不会被其他block影响
+ element只能作为block的一部分使用，不可独立使用
例子：
error:
<form class="search-form__input"/>
<button class="search-form__button"/>
+ block不一定含有element
* Modifier ：修饰符，用以展示状态，表现（size,color,...），用它们来改变外观或行为。
使用双中划线和block或element相连，
例子：
<form class="search-form">
<input class="search-form__input">
<button class="search-form__button search-form__button--disabled">
</form>
*Modifier不单独使用，使用时需要对应的block或element*
3. Bem展示的思维方式：
Bem将页面分为多个block组成，其下同时是有多个element构成，每个element,block之间是相互独立的，页面是由组件组合而成，而组件与组件之间是相互组合，而不是依赖