Block，Element 和 Modifiers

简介

| BEM | 含义 | 例子 | | --------- '| -------------------------------------------------- | ------------------------------------------------------------ |' | Block | 独立实体，它本身就是有意义的 | header , container , menu , checkbox , input | | Element | 块的一部分，没有独立含义，并且在语义上与其块相关联 | menu item , list item , checkbox caption , header title | | Modifiers | 块或元素上的标志。使用它们来改变外观或行为 | disabled , highlighted , checked , fixed , size big , color yellow |

优点：

• '模块化：块样式永远不会依赖页面上的其他元素，不会遇到级联问题'
• '可重用性：以不同方式组合块，并智能重用它们，减少了必须维护的 CSS 代码量'
• '结构体：BEM方法为CSS 代码提供了一个简单易懂的结构'

用法以及特点

Block

封装一个独立的实体，本省是有意义的，虽然块相互嵌套并相互交互，但在语义上它们保持相等，没有优先权或等级制度。没有 DOM 表示的整体实体（例如控制器或者模型）也可以是块。

命名

块的名称可以包含 拉丁字母，数字和短划线。要形成 CSS 类，要为 namespacing 添加一个简短的前缀： block 。

HTML

如果接受类名，则任何 DOM 节点都可以是块。

<div class="block">...</div>

CSS

• '仅使用类名选择器'
• '没有标签名称或 ID'
• '不依赖页面上的其他块/元素'

.block {
  color: #ff9;
}

Element

块的一部分并没有独立的含义，任何元素在语义上与其块相关联

命名

元素的名称可以包含拉丁字母，数字，短划线和下划线。CSS 类形成块名称加上两个下划线加上元素名称： .block__elem

HTML

块中更多任何 DOM 节点都可以是元素，在给定块内，所有元素在语义上都是相等的。

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

CSS

• '仅使用类名称选择器'
• '没有标签名称或ID'
• '不依赖页面上的其他块/元素'

/* 好 */
.block__elem {
  color: #ff9;
}

/* 坏 */
.block .block__elem {
  color: #ff9;
}

div.block__elem {
  color: #ff9;
}

Modifier

块或元素上的标志，使用它们来改变外观，行为或状态

命名

修饰符名称可以包含拉丁字母，数字，段划线或下划线，CSS类形成块的或元素的名称机上两个破折号： block--mod 或是 block__elem--mod 和 block--color--black 与 .block--color--red . 复杂修改器中的空格由短划线替换。

HTML

修饰符是添加到块/元素 DOM 节点的额外类名。仅将修饰符类添加到它们修改的块/元素，并保留原类。

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

CSS

使用修饰符类名作为选择器：

.block--hidden {
}

要基于块修饰符更改元素:

.block--mod .block__elem {
}

元素修饰：

.block__elem--mod {
}

其他问题

有时候可能有嵌套块的情况，翻了很多文章，大概有几个例子:

.block-block__element--modifier

.block-block--modifier__element--modifier