BEM ​

Block, Element, Modifier（BEM）理论是 HTML 和 CSS 中流行的class命名约定。
由Yandex的团队开发，其目标是帮助开发人员更好地了解给定项目中HTML和CSS之间的关系。

Block ​

可以重用，相对独立的页面组件。可以任意嵌套。

<ul class="menu"></ul>

Element ​

块的组成内容，不能单独使用。块可以没有元素。

<ul class="menu">
  <li class="menu__item"></li>
</ul>

默认的命名方式是block__element，团队协商一致后可以更改连接符号__（双下划线）。

元素与元素可以任意嵌套，但不能反映到命名上，不能命名为block__elem1__elem2。

Modifier ​

定义块或元素的外观、状态或行为。

<ul class="menu_opened">
  <li class="menu__item_active"></li>
</ul>

默认的命名方式是block__element_modifier，团队协商一致后可以更改连接符号_（下划线）。

在修饰符有不同值时，可以用key_value方式命名：block__element_key_value，例如btn_size_large。

混合 ​

在单个DOM元素上，可以使用不同块定义的BEM类名。实现BEM的复用、扩展。

<header>
  <ul class="menu header__menu">
    <li class="menu__item"></li>
  </ul>
</header>

参考资料 ​

• bem.info
• BEM 101
• suit css 推荐的一种BEM实践方案