显示了一个具有相互嵌套的

suraiyaislamsum

块和元素的对象模型。该结构还可以包含任意数量的自定义数据字段。我们称这种结构BEM Tree为（类比 DOM 树）。 最终的浏览器标记是通过将模板转换（使用 XSL 或 JavaScript）应用于 BEM 树来生成的。 如果开发人员需要将块移动到页面上的不同位置，他可以通过更改 BEM 树来实现。模板自行生成最终视图。 在我们最近的产品中，我们使用 JSON 作为页面描述格式。然后通过基于 JS 的模板引擎将其转换为 HTML。我们使用的工具列在本文末尾。 块独立性  随着项目的增长，块往往会在页面上添加、删除或移动。例如，您可能想要将Logo与交换Auth Block，或将 放在Menu下Search Block。 交换块 为了使这个过程更容易，块必须是Independent. 块Independent的实现方式允许在。

页面上的任意位置进行任意放置，包括嵌套在另一个块内。 独立 CSS   从 CSS 的角度来看，这意味着： 块（或元素）必须具有可在 CSS 规则中使用的唯一“名称”（CSS 类）。 HTML 元素不得在 CSS 选择器 (.menu td) 中使用，因为此类选择器本质上不是上下文无关的。 应避免 购买电话号码列表 多个块的级联选择器。 独立 CSS 类的命名  满足上述要求的 CSS 类的可能命名方案之一如下： 块的 CSS 类与其Block Name. 复制 元素的 CSS 类是由一些字符分隔的a> 复制 有必要在元素的 CSS 类中包含块名称，以最大限度地减少级联。一致地使用分隔符也很重要，以允许工具和帮助程序对元素进行明确的编程访问。 可以使用不同的命名方案。看看这里我们使用的命名约定。 独立模板  从模板引擎的角度来看，块独立性意味着： 块和元素必须。



在输入数据中进行描述。块（或元素）必须具有唯一的“名称”，以使“Menu应该放置在这里”之类的内容可以在我们的模板中表达。 块可能出制 我们逐渐在我们的产品中放弃 XSLT，转而使用我们自己的基于 JavaScript 的模板引擎XJST。这个模板引擎吸收了我们喜欢的 XSLT 的所有内容（我们是声明式编程的粉丝），并在客户端或服务器端利用 JavaScript 的生产力来实现它。 在 Yandex，我们使用一种名为 BEMHTML 的特定于域的语言编写模板，该语言基于 XJST。BEMHTML 的主要思想发布在 Ya.Ru 上的 BEM 俱乐部（俄语）。 块重复  第二个Menu Block可能发生在Foot Block网站中。另外，一个Text Block可以分成两个，中间用广告隔开。 即使一个块是作为单个单元开发的，相同的块也可以随。