什么是BEM?
BEM代表块(Block),元素(Element),修饰符(Modifier)。这些术语的含意将在本文进一步阐述。
编程方法论中一个最常见的例子就是面向对象编程(OOP)。这一编程范例出现在许多语言中。在某种程度上,BEM和OOP是相似的。它是一种用代码和一系列模式来描述现实情况的方法,它只考虑程序实体而无所谓使用什么编程语言。
我们使用BEM的原则创建了一个前端开发技巧和工具的集合,这样我们就能快速构建一个网站,并且保证他们长久的可维护性。
统一数据域
想象一个如下图所示的普通网站。
就这样的一个网站来说,指出它是由哪些“块”构成的,对开发是很有帮助的。
例如,在上图中有Head,Main Layout和Foot块。Head由Logo,Search,Auth块和Menu组成。MainLayout包括一个Page Title和一个Text块。
对于团队沟通来说给页面的每一部分起个名字是很有用的。
这样的话一个项目经理就可以这么说:
让Head再大点;
创建一个Head中不带Search的页面。
一个HTML开发人员可以对一个JavaScript开发人员说:
给Auth块来点动画,等等
现在让我们仔细了解一下什么是BEM:
块(Block)
一个块是一个独立的实体,就像应用的一块“积木”。一个块既可以是简单的也可以是复合的(包含其他块)。
例如搜索表单块:
元素(Element)
一个元素是块的一部分,具有某种功能。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的。
例如一个输入域和一个按钮是Search块的中的元素。
描述页面和模板的意义
块和元素构成了页面的内容。它们不仅仅是被呈现在一个页面上,它们的排列顺序也同样重要。
块(或元素)彼此之间可能遵循着某种顺序。
例如,电商网站上的一个商品列表:
……或者菜单项:
块里也有可能再嵌套块。
例如,一个Head块会包含其他块:
除了我们自己创建的一些块之外 ,我们还需要一种途径来描述页面上那些纯文本的布局。为此,每一个块和元素都应该有一个可以识别的关键字。
用来标识一个具体块的关键字其实就是这个块的名字(bl