BEM命名规范

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在语义上都是相等的。

<div class="block">
     <span class="block__name"></span>
</div>

• CSS
• 只选择class名字作为选择器
• 没有标签名或者id
• 不依赖当前页面的其它block或者element
  Good

.block__elem{color:#042};

Bad

.block .block__elem {color:#042;}
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

<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>

Bad

<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
来源：简书