如何用 BEM 来规范您的 CSS 的代码(理论篇）

什么是 BEM 呢，是 block element modifer 的缩写吧。BEM代表块（Block），元素（Element），修饰符（Modifier）著作权归作者所有。编程方法论中一个最常见的例子就是面向对象编程（OOP）。这一编程范例出现在许多语言中。在某种程度上，BEM 和 OOP 是相似的。它是一种用代码和一系列模式来描述现实情况的方法，它只考虑程序实体而无所谓使用什么编程语言。著作权归作者所有。BEM 是为了模块化 CSS 的一种规范，BEM 是一种方法论。创始人是来自欧洲的 Yandex。BEM 的目标就是开发有效的有组织的 CSS 代码。

block 代表了更高级别的抽象或组件。

.block__element 代表.block的后代，用于形成一个完整的.block的整体。

block--modifier代表.block的不同状态或不同版本。

我们为什么用 BEM，可以模块化 css ，这样我们就避免了瀑布的影响，同时这些模块化后的代码块在项目间复用。有了复用也就是减少了 css 的代码量，代码量下了也就好维护。还有就是结构化，结构化的好处也就是容易扩展。 

我们来分析一个简单的网页，这就是 github 的首页，这里我们之前学习的知识来分析和规划网页的样式。我们用颜色区分不同功能。

块名称需要是唯一的。块名称的级别类似我们语言的类级别。

元素名称相对于块内，也就是块内是唯一的。还有就是整个设计中切记不要用 id 来作为标识来定义样式。

下面命名规则，双下划线表示元素，两个中划线表示修饰符。这个只是一种约定俗成的，使用习惯你也可以根据自己来定义自己的规范。