什么是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=<