BEM

BEM 代表 Blocks, Elements and Modifiers。这是一种最初由俄罗斯科技公司 Yandex 构思的方法，但在美国和西欧的网络开发者中也获得了相当大的吸引力。

同样的意思是，BEM 方法论将 HTML 和 CSS 代码组件化为三种类型的组件：

• 块： 独立实体，它们本身就是有意义的

  例如 header，container，menu，checkbox＆textbox

• 元素： 块的一部分，没有独立的含义，并且在语义上与它们的块相关联。

  例如 menu item，list item，checkbox caption＆header title

• 修饰符： 块或元素上的标志，用于更改外观或行为

  例如 disabled，highlighted，checked，fixed，size big＆color yellow

BEM 的目标是保持优化 CSS 代码的可读性，可维护性和灵活性。实现这一目标的方法是应用以下规则。

• 块样式永远不依赖于页面上的其他元素
• 块应该有一个简单的短名称，并避免使用 _ 或 - 字符
• 在样式元素时，使用格式 blockname__elementname 的选择器
• 样式修饰符时，请使用格式为 blockname--modifiername 和 blockname__elementname--modifiername 的选择器
• 具有修饰符的元素或块应继承其正在修改的块或元素中的所有内容，但修饰符应修改的属性除外

代码示例

如果将 BEM 应用于表单元素，则 CSS 选择器应如下所示：

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

相应的 HTML 应如下所示：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>