CSS之BEM命名规范

什么是BEM

BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。使用BEM主要是为了将用户界面划分成独立的块，使开发更为简单和快速，有利于团队协作，方便维护。

为什么要选择BEM

很多新手在开始写网页时，在命名方面可能都比较随心所欲。但是在一个正式的项目中，会有很多开发人员同时进行开发，如果每个开发人员都用自己的一套命名，这样会造成命名的识别度和一致性成为很大的问题，还会造成命名污染。这时使用BEM命名方法就可以很好的解决这个问题。

当然使用BEM还有很多其他的好处，例如每个块之间都是独立的，因此不会遇到层叠带来的问题。且这些块可以多次重用，可以减少必须维护的css代码量等。

BEM命名规则

• 块名称为其元素和修饰符定义了命名空间。
• 块名称与元素名称之间用双连字符--分隔。
• 块名称与修饰符或元素与修饰符之间用双下划线__分隔。
• 命名一般使用小写字母。
• 单词之间可以使用-分隔。

命名约定的模式有如下几种：

.block{}
.block__element{}
.block--modifier{}
.block__element{}--modifier{}

其中block代表了更高级别的抽象或组件，block__element代表.block的后代，用于形成一个完整的block的整体，block--modifier代表block的不同状态或不同版本。使用两个连字符和下划线时为了让自己定义的块可以用单个连字符来界定。

Block

Block是一个功能独立的页面组件，可重复使用，也支持嵌套。我们平时浏览的网页，都是由”块“构成的。

每个块的块名必须是唯一的，用于明确指出它所描述的是哪个块。例如某个块的名字为head，那我们就能够根据这个块名推测出这应该是一个头部块，位于网页的头部。

在使用块时，块不应影响其环境，也就是不应设置块的外部几何形状或位置。需要注意的是块应该是独立的，当在页面中添加，删除，或者是移动某个块时，不需要对块进行修改。

示例：

下面一共有3个块，分别是top、search-form、bottom，块之间可以嵌套：

<div class="top">
	<form class="search-form">搜索</form>
</div>
<div class="bottom">底部</div>

我们在实际应用中，需要保证每个块都是独立的。举个例子说明，例如我们将top块中的search-form块移动到bottom块中，想要保证整体不会乱，就需要search-form块的CSS必须是独立的。如果我们在写CSS时，直接将search-form块嵌套在top块下是不好的：

/*错误写法*/
.top .search-form{
   ...}  /*表示只有在top块内的search-form块才会应用此CSS样式*/
.bottom{
   }

这样的话，后续如果我们要在HTML代码中移动search-form块（或重用）到bottom块中时，页面样式肯定是会乱的，这样又增加了我们的工作量。我们一开始就应该考虑好后续可能会出现的情况，所以不会这样写CSS。

正确写法如下所示：

/*正确写法*/
.top{...}
.bottom{}
.search-form{...}

Element

元素是块的组成部分，是依赖上下文的。元素的名称用于描述它是什么，而不是它的状态。元素在所属的块中指定位置时，才能表现出应有的功能。

元素之间可以彼此嵌套，一个元素总是一个模块的一部分，而不是另一个元素的一部分，这意味着元素的名称不能被定义为 block__elem1__elem2 这样的层次结构。

示例：

<div class=<