原文地址：Why you should use BEM to organize your CSS

如果您创建的是一个小型应用程序或简单网页，那么如何组织 stylesheet（样式表）并不会很重要。但对于更大、更复杂的项目，您组织代码的方式会影响项目的效率。它不仅会影响您必须编写多少代码，还会影响需要编写多少代码。此外，它会增加浏览器所需的加载量，进而影响性能。

为什么是 BEM?

BEM 提供结构, 对任何项目都有好处，无论大小。对我来说 BEM 很容易理解和实现。它还避免了继承并减少了样式冲突。

我选择 BEM 而不是其他方法的原因在于：它比其他方法（也就是 SMACSS）更容易混淆，但仍然为我们提供了我们想要的良好架构（也就是 OOCSS）和可识别的术语。

Mark McDonnell

Block, Element, 与 Modifier

BEM 代表 ‘block（块）’, ‘element（元素）’, 与 ‘modifier（修饰符）’

绿色 = Block, 蓝色 = Element, 红色 = Modifier

Block（块）

本身就有意义的独立实体。

例子:
// 顶栏、容器、菜单、复选框、输入框
header, container, menu, checkbox, input

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

CSS
.block { color: #fff; }

Element（元素）

Block（块）的一部分，没有独立的含义并且在语义上与其 Block（块）相关联。CSS class 使用 Block（块）的名称加上两个下划线 __ 和Element（元素）的名称。

例子:
// 菜单项、列表项、复选框说明、标题标题
menu item, list item, checkbox caption, header title

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

CSS
.block { color: #fff; }
.block__elem { color: #303030; }

Modifier（修饰符）

Block（块）或 Element（元素）上的标志。使用它们来改变外观或行为。CSS class 使用 Block（块）或 Element（元素）的名称加上两个破折号 -- 和 Modifier（修饰符）的名称。

例子:
// 禁用、突出显示、选中、固定、尺寸大、黄色
disabled, highlighted, checked, fixed, size big, color yellow

HTML
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
        
CSS
.block { color: #fff; }
.block--mod .block__elem { color: #303030}
.block__elem--mod { color: red}

计算机科学中只有两个难题：缓存失效和命名事物 — Phil Karlton

好处

结构化

BEM 使您的 CSS 易于阅读和便于导航。

模块化

BEM 处理了样式表级联效果的一些问题；因为块的样式不依赖于其他页面元素，例如您的 h2 选择器对侧边栏的 h2 产生了意外影响。

可重用性

创建相互独立的代码块可以让您重复利用它们，这将减少您需要编写 CSS 的数量。块变得如此具有可重用性，以至于您可以构建它们的库供以后使用。