什么事BEM

 BEM 代表了Block,Element,Modifier.这些条目的意义将在后续文章中进行描述。
  在程序设计中，一个最常见的例子就是面向对象的程序设计。它是一种被许多语言所支持的变成范式。在某种程度上，BEM是类似于OOP。他是一种用代码来描述现实的方式，是一组模式，一种用来思考程序实体而不管这个程序使用的是哪种语言.
 我们使用BEM原则去创建一套前端的开发技术和工具，他能是使我们快速的开发网页并且能够长时间的维护它。
 
统一数据模型  

  想象一个原始的网站，就像下面图片所展示的那样。  

 
  当开发一个这样的网站，有用的做法是标出网站所包含的"blocks"部分。
 
 举例来说，在下图中，有Head,Main layout和Foot blocks。Head 包含Logo,Search，Auth block 和 Menu.Main Layout 包含一个 Page Titile和一个Text Block.
 
  

 
 在团队交流中，给网站的每一个部分一个名字是很有用的。
 
 一个项目经理可能会问：

•   让Head部分变大一些或者

 

•   创建一个头部没有Search部分表单的页面。

 
 一个HTML开发者可能会问一个javascript开发者同事

•   让Auth Block拥有动画效果，等等...

 
 现在然我们更近一步的了解BEM包含什么？
 
Block
   block 是一个独立的实体，也是一个应用程序的"building block".一个block既可以简单也可能复杂（包含其他blocks）。
 例子 搜索表单block

 
Element  
  一个element是block的一部分，它拥有一个特定的功能。Elements是与上下文相关的：它仅仅在隶属于一个block上下文中才有意义。
 
例子：一个输入域和一个按钮是Search Block的Elements.

描述页面和模板的方式  
Blocks和elements包含于页面内容之中。除了简单地在一个页面上，他们的安排也很重要。
Blocks(或者elements)可以按照一定的顺序相互排序。
例如，一家商业公司的商品清单。
 

 
...或者菜单条目：

 
Blocks也可以包含于其他blocks中。
例如，一个 Head Block 包含其他blocks。

 
除了我们的建设中的blocks，我们需要一种方式在一张空白的text中描述页面布局。为了做这个，每一个block和element需要一个为了标识区别它的关键字。
 
 关键字指定一个特定的块的名字，称之为block name.
 举例来说，menu可以是一个Menu block的关键字，head可以是一个Head block的关键字。
 关键字指定的一个element称之为element name.
 举例来说，菜单中的每一项是一个菜单block的element 项。
 在一个项目中，块名称必须是唯一的，明确指定哪个块被描述。同一个块的唯一实例可以有相同的名称。我们说，在这种情况下，一个块是目前在2页（3，4，…）等等。
 Elements的名称必须在一个block范围内统一。一个element可以被重复几次。
 
 例如，菜单项：
 
 

  
关键字必须按照一定的顺序排列。任何内在支持XML,JSON格式的数据将会是这样的：
 

<b:page>
  <b:head>
    <b:menu>
      …
    </b:menu>
    <e:column>
      <b:logo/>
    </e:column>
    <e:column>
      <b:search>
        <e:input/>
        <e:button>Search</e:button>
      </b:search>
    </e:column>
    <e:column>
      <b:auth>
        …
      </b:auth>
    <e:column>
  </b:head>
</b:page>

 
 在这个例子中，b和e命名看空间将block节点和element节点分开。
 
 用json将是这样的表达：
 
 

{
  block: 'page',
  content: {
    block: 'head',
    content: [
      { block: 'menu', content: … },
      {
        elem: 'column',
        content: { block: 'logo' }
      },
      {
        elem: 'column',
        content: [
          {
            block: 'search',
            content: [
              { elem: 'input' },
              { elem: 'button', content: 'Search' }
            ]
          }
        ]
      },
      {
        elem: 'column',
        content: {
          block: 'auth', content: …
        }
      }
    ]
  }
}