块(Block)，元素(Element)，修饰符(Modifier)
日期：2014-04-25 浏览次数：21251 次
| 文章简介：BEM代表块（Block），元素（Element），修饰符（Modifier）。这些术语的含意将在本文进一步阐述。 |
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块会包含其他块：
除了我们自己创建的一些块之外 ，我们还需要一种途径来描述页面上那些纯文本的布局。为此，每一个块和元素都应该有一个可以识别的关键字。
用来标识一个具体块的关键字其实就是这个块的名字（block name）。
例如，menu可以作为Menu块的关键字，head可以作为Head块的关键字。
用来标识一个元素的关键字也是这个元素的名字。
例如，菜单中的每个菜单项就是menu块的item元素。
一个项目中的块名必须是唯一的，明确指出它所描述的是哪个块。相同块的实例可以有相同的名字。在这种情况下一个块在一个页面上可以出现2（3，4，……）次。
一个块范围内的一种元素的名字也必须是唯一的。一种元素可以重复出现多次。
例如，菜单项：
关键字应该按一定的顺序摆放。任何支持嵌套的数据格式（XML，JSON）都可以:
<b:page> <b:head> <b:menu> … </b:menu> <e:column> <b:logo/> </e:column> <e:column> <b:search> <e:input/> <e:button>Searc
