BEM - Block Element Modfier（块元素编辑器）是一个很有用的方法，它可以帮助你创建出可以复用的前端组件和前端代码
- 块
- 独立的实体，它本身是有意义的。
- 例子 header，container，menu，checkbox，input
- 元件
- 块的一部分，没有独立的含义，并且在语义上与其块相关联。
- 例子 menu item，list item，checkbox caption，header title
- 修改
- 块或元素上的标志。用它们来改变外观或行为。
-
例子 disabled，highlighted，checked，fixed，size big，color yellow
优点：
- 单元性
块的样式从来不依赖同页面其它的元素，所以你永远不会遇到级联问题。您还可以将完成的项目中的块转移到新项目中。 - 重用性
不同方式组织独立的块，并智能地重用它们，可以减少必须维护的CSS代码量。通过一系列风格指南，您可以构建一个块库，使您的CSS超级有效。 - 结构化
BEM方法可以使得你的CSS代码结构性很好，从而更加容易理解。
Block
- 封装一个只对自己有意义的实体。当blocks能够被嵌套而且彼此之间可以交互的时候，语义上他们是等价的；没有层级关系。没有DOM表示的整体实体。（例如控制器和模型也可以是块）
- Naming Block的名字包含拉丁字母，数字和句号。当组合一个完整CSS class的时候，可以增加一个短的前缀：.block
- HTML 任何DOM节点可以作为一个Block，只要它接受一个class名。
<div class="block">...</div> - CSS
- 只使用class名选择器
- 没有标签名和或者id
- 同一页面里，不依赖其它的block或者element
- 例如
.block {color:#042;}
Element
- Block的一部分，当把它独立取出来时，没有任何实际意义。任何元素在语义上都是它自己的block紧密相连的。
- Naming Element的名字可能包含拉丁字母，数字，句号以及下划线。CSS class名由block名成加两个下划线再加element的名字，最后组织成一个块名。
- HTML 任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的。
1 <div class="block"> 2 <span class="block__name"></span> 3 </div>
- CSS
- 只选择class名字作为选择器
- 没有标签名或者id
- 不依赖当前页面的其它block或者element
Good
1 .block__elem{color:#042};
Bad
1 .block .block__elem {color:#042;} 2 div.block__elem {color:#042;}
Modifier
- block或者element的flag。使用他们可以改变样式，行为或者是状态。
- Naming Modifier的名字可以包含拉丁字母，数字，句号以及下划线。CSS的class可以由block或者element名称后面加--组成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。复杂的modifier里由短线替代空格。
-HTML Modifier是一个额外的加在block或者element class名之后一个class 名。只为他们负责修改的blocks或者elements添加class，然后保持原有的class不变。
Good
1 <div class="block block--mod">...</div> 2 <div class="block block--size-big block--shadow-yes">...</div>
Bad
1 <div class="block--mod">...</div>
CSS
- 使用modifier类名作为选择器 .block--hidden { }
- 基于block级的modifier修改元素 .block--mod .block__elem { }
- 元素修改器 .block__elem--mod { }
作者：趁你还年轻233
链接：https://www.jianshu.com/p/339fdb93e155
来源：简书