Block 是一个逻辑上和功能上独立的页面组件,等同于网页组件中的部件(等同于网页中的组件)。Block 封装了行为(Javascript)、模板、样式(CSS)和其他实现技术。独立状态的 Block 可供复用,并且促进项目开发和维护。
Block 可以被嵌套到任何其他 block 里面去。例如,一个头部 block 可以包含一个 logo、一个搜索表单和一个登录 block。
Block 可以在一个页面内任意移动,也可以在页面之间或项目之间移动。Block 作为独立的实体来实现,这使得在页面上改变 block 的位置 并确保其功能和外观一切正常 成为可能。
因此,即使不修改 block 的 CSS 和 Javascript 代码,logo 和 登录表单 也可以到处切换(译者注:即 logo 和 登录表单 可以用在各个页面各个项目中)。
一个界面可以包含同一个 block 的几个实例。
Element 是一个 block 的组成部分,它不能被拿到 block 的外面使用。例如,一个菜单项(a menu item )不会在一个菜单块(a menu block )范围之外使用,因此它是一个元素(element)。
什么时候应该用 block?什么时候应该用 element?(A block or an element: when should I use which? )
BEM 方法论不推荐大家在element 内使用 element(Using elements within elements is not recommended by the BEM methodology )
Modifier 是一个 BEM 实体,它定义了一个 block 或 element 的外观和行为。
Modifier 可用也可不用(即不一定要用到 modifier)。
Modifier 本质上与 HTML 的属性很相似。同一个 block 会因为 modifier 的使用而 看起来与之前有所不同。
例如,菜单块(the menu block )的外观可能会因为在它身上用了一个 modifier 而改变。
Block,element 和 modifier 合起来就被成为 BEM entity。它是一个 既可以用来指代单独的 BEM 实体又可以作为 block、element 和 modifier 的总称的 概念。
Mix 是被托管在(being hosted on)一个单独的 DOM 节点上的 不同 BEM 实体(混合而成)的一个实例。
Mix 允许我们:
我们假设,项目里的链接(links)通过一个链接块(a link block)来实现。我们需要把菜单项(menu items )格式化成链接(links)。这里有几种实现方法:
BEM tree 是网页结构在 block、element 和 modifier 方面的表示(representation)。这是一个在 DOM 树之上的抽象概念,它描述了 BEM 实体的名称、它们的状态、顺序、嵌套和辅助数据。在现实生活中的项目,BEM tree
可以呈现在任何支持树结构的形式(format)中。
让我们看一下 DOM 树的一个例子:
对应的 BEM tree 看起来是这样子的:
header ├──logo └──search-form ├──input └──button └──lang-switcher
在 XML 和 BEMJSON 格式中,该 BEM tree 则是这样的:
XML
BEMJSON
{ block: 'header', content : [ { block : 'logo' }, { block : 'search-form', content : [ { block : 'input' }, { block : 'button' } ] }, { block : 'lang-switcher' } ]}
Block implementation 是指一组各不相同的 技术,这些技术决定着 BEM 实体以下几方面:
Implementation technology 是一种用于实现 一个 block 的技术。Block 可以用一种或多种技术来实现,例如:
例如,如果一个 block 的外观是用 CSS 来定义的,这意味着 block 是用 CSS 技术实现的。同样地,如果一个 block 的文档是用 Markdown 格式写的,block 就是用 Markdown 技术来实现的。
Block implementation 是指通过在不同的层级上增加新的功能到 block
来修改 block
。
Redefinition level 是指一组 BEM 实体和它们的部分实现。
一个 block 的最终实现 可以被分成 不同的重定义层级。每一个新的层级都会扩展或覆盖原始的 block implementation。最终的结果由 来自所有按照预设的连续的顺序排列的重定义层级的独立的 block implementation technologies 组合而成。
任何 BEM 的实现技术都可以被重新定义。
例如,有一个连接到项目的第三方库。这个库包含现成的 block implementation。该项目指定的 block 保存在一个另一个重定义层级。比方说(Let's say ),我们需要修改这个库里的某一个 block 的外观。这并不需要在库的源代码里修改 block 的 CSS 规则 或者 在项目里复制代码。我们只需在项目里为 那一个 block 创建额外的 CSS 规则。在生成过程中,所产生的实现 将会结合 来自库的原始规则 与 来自项目的新样式。(原文喜欢用 library level 和 project level,但翻译的时候,直接理解为 library 和 project 就好)
联系客服