blocks, elements (element), modifiers (Modifier)

Article Introduction: Bem represent blocks, elements (element), modifiers (Modifier). The meaning of these terms will be further elaborated in this paper.

What is BEM?

Bem represent blocks, elements (element), modifiers (Modifier). The meaning of these terms will be further elaborated in this paper.

One of the most common examples of programming methodologies is object-oriented programming (OOP). This programming paradigm appears in many languages. In a way, BEM and OOP are similar. It is a way of describing the reality in code and a series of patterns, which takes into account only program entities and does not matter what programming languages are used.

We have created a collection of front-end development techniques and tools using the BEM principle, so we can quickly build a Web site and ensure their long-term maintainability.

Uniform data fields

Imagine an ordinary Web site as shown in the following figure.

In such a site, it is pointed out that it is composed of which "block" is very helpful to development.

For example, there are head,main layout and foot blocks in the diagram above. The head is made up of logo,search,auth blocks and menu. Mainlayout includes a page title and a text block.

It is useful to have a name for each part of the page for team communication.

In this way, a project manager can say:

• Let the head be a little bigger;
• Create a page with no search in the head.

An HTML developer can say to a JavaScript developer:

• Give Auth a little animation, and so on.

Now let's take a closer look at what is BEM:

blocks (block)

A block is an independent entity, just like the application of a "block". A block can be either simple or complex (including other blocks).

For example, to search for a form block:

elements (Element)

An element is part of a block and has some function. Elements are context-dependent: they are meaningful only if they are in the context of the block they should belong to.

For example, an input field and a button are elements in the search block.

describe the meaning of pages and templates

Blocks and elements make up the content of the page. They are not only presented on a single page, but they are also important in their order of arrangement.

Blocks (or elements) may follow a certain order between each other.

For example, a list of items on an electrical dealer's website:

...... or menu item:

There is also a possibility of nesting blocks in the block.

For example, a head block would contain other blocks:

In addition to some of the blocks we created ourselves, we also need a way to describe the layout of those plain text on the page. For this reason, each block and element should have a recognized keyword.

The keyword used to identify a specific block is actually the block name.

For example, menu can be used as a keyword for a menu block, and the head can be used as a keyword in the head block.

The keyword used to identify an element is also the name of the element.

For example, each menu item in the menus is the item element of the meal block.

The block name in a project must be unique, indicating exactly which block it is describing. Instances of the same block can have the same name. In this case a block on a page can appear 2 (3,4, ...). Time

The name of an element within a block range must also be unique. An element can recur multiple times.

For example, menu items:

Keywords should be placed in a certain order. Any data format that supports nesting (Xml,json) can be:

               …                                                    Search                                 …               

In this example, the B and e two namespaces are used to distinguish between blocks and elements of both nodes.

It can also be represented in JSON format:

{   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: …         }       }     ]   

The above example shows an object model in which blocks and elements are nested together. Any number of custom data fields can also be included in this structure.

We call this structure the BEM tree (similar to the DOM tree).

The final browser tag is generated by applying template transformations (using XSL or JavaScript) to the Bem tree.

If a developer needs to move a block to another part of the page, he just needs to change the BEM tree. The template generates the final view.

You can use any format to describe the Bem tree, or you can use any template engine.

We use JSON as the descriptive format for the page. And then through a JS based template engine bemhtml to convert it to HTML.

the independence of the Block

With the development of a project, we often add, delete, or move some blocks to the page. For example, you might want to swap logos and auth blocks, or place the menu under the search block.

In order for this process to be simpler, the block must be independent.

A separate block can be placed anywhere on the page, including nesting in other blocks.

Standalone CSS

From the point of view of CSS:

• A block (or an element) must have a unique "name" (a CSS Class) so that it can be played by CSS rules.
• HTML elements cannot be used as CSS selectors (such as. menu TD) because such selectors are not completely context-independent.
• Avoid using cascading (cascading) selectors (such as. menu. Item).

name a standalone CSS class

The following is a possible CSS class naming scheme:

The CSS class name for a block is the name of the block.

The CSS class name for an element is a combination of a block name and an element name, separated by some symbols.

 

   
…
 
 

It is necessary to include a block name in the CSS class name of an element to minimize cascading.

We use hyphens in long names to separate words (for example, Block-name) and use two underscores to separate block names and element names (Block-name__element-name).

For example:

• Block-name--element-name
• Blockname-elementname

Standalone Templates

For the template engine, the independence of the block means:

• Enter the data to describe the blocks and elements: the block (or element) must have a unique "name" that tells us things like "menu should be put here" in the template.
• Blocks can appear anywhere in the BEM tree.

Standalone block template

When the template engine encounters a block in a template, it can accurately convert the block to HTML. So each block should have its own template.

For example, the following is an XSL template:

Our products are gradually discarding XSLT, and we are parsing it with our own JavaScript based template engine xjst. This template engine absorbs the benefits of all XSLT (we are fans of declarative programming) and can be implemented using JavaScript both on the server and on the client side.

Now we write our template using a specific domain language called bemhtml , which is based on Xjst. Bemhtml's main idea was presented at the BEM Club in ya.ru (in Russia).

the repetition of the block

A second menu block of a Web site may appear in a foot block. Alternatively, a text will become two, separated by an advertisement in the middle.

Even if a block is developed into a separate unit, the same block may appear on this page at any time.

In CSS-related terminology, this means:

• The ID selector must not be used: only class selectors can meet our uniqueness requirements

In JavaScript it means:

• You can accurately detect blocks that have the same behavior because they have the same CSS class name: Using CSS class selectors, you can pick all blocks of the same name to easily define dynamic behavior

Block Modifiers

We often need to create a block that is very similar to a block that already exists, just a slight change in appearance or behavior.

For example, we have one such task:

Add another menu to the footer that is not the same layout.

To avoid developing another block that is slightly different from the existing block, we introduce the concept of a modifier (modifier).

Modifier as a block or an attribute of an element that represents the change in appearance or behavior of this block or element.

A modifier has a name and a value. Multiple modifiers can be used at the same time.

For example, a block modifier to specify a background color

For example, an element modifier that changes the current option

modifiers from the point of view of the input data

In the Bem tree, modifiers are used to describe a block or an attribute of an element entity.

For example, they can be used as attribute nodes of XML:

You can also use JSON:

{   block: "menu",   mods: [    { size: "big" },    { type: "buttons" }   

modifiers from a html/css perspective

For a block or an element, the modifier is an additional CSS class.

.menu_size_big {   // CSS code to specify height } .menu_type_buttons .menu__item {   

We use an underscore to separate the block name (or element name) and the modifier name, and then use another underline to separate the modifier name and its corresponding value. The original text is Russian, which is roughly what it means.

element Modifiers

Element modifiers are implemented in the same way.

When writing CSS code, it is important to always use delimiters for programmatic accessibility.

For example, the current menu item might be marked with a modifier:

   Index   Products   

{   block: "menu",   content: [     { elem: "item", content: "Index" },     {       elem: "item",       mods: { "state" : "current" },       content: "Products"     },     { elem: "item", content: "Contact" }   

.menu__item_state_current {   

The above structure is represented in HTML as follows:

 

   
Index
 
Products
 
 

Or make the menu class independent of the implementation details of its layout:

  
 
   
 
    
 < Div class= "Menu__item" >Index
   
  
  
 & Lt;div class= "Menu__item menu__item_state_current" >Products 
 
 
   

    Contact
   
 
   
  
 
   

    products 
   
    TD class= "Menu__layout-unit" > 
      
 
    

     
 
      
 
       

        Index
       
 
 
       

        contact
       
 
 
     
 
    
   
 
  
  

Topic Abstraction

When many people develop the same project they should be consistent on the data field and use it when naming blocks and elements. For example, a chunk of a tag cloud is always named tags. Each of these elements is a tag. This Convention runs through all languages: css,javascript,xsl and so on.

From the point of view of development processing: all participation is based on the same agreement.

From a CSS perspective: blocks and elements of CSS can be written as a pseudo code, and then compiled according to the naming convention to CSS.

.menu {     __layout {       display: inline;     }     __layout-item {       display: inline-block;       …     }     __item {       _state_current {         font-weight: bold;       }     }   

Appropriate javascript: You can use a specialized auxiliary library instead of using the class name to select a DOM element directly:

CSS class naming conventions for blocks and elements may change over time. If the naming convention changes, you only need to modify the methods (function) that you want to access the blocks and elements, and the modifiers that might handle them.

The code above is abstract, and in reality we use the JavaScript cores and libraries of the I-BEM blocks in the BEM-BL block.

the consistency of the block

A Web site has a button block with some kind of dynamic behavior.

When the mouse slides over such a block, its appearance changes.

The manager may require that the same buttons be used on other pages as well.

A piece of light has a CSS implementation is not enough. Reusing a block also means reusing its behavior, which is the JavaScript it binds to.

So a block must "know" everything about itself. In order to implement a block, we use all the techniques we use to describe its appearance and behavior, which we call the multi-language mechanism.

Multi-language description of a block involves all programming languages (technologies) that implement the look and functionality of this block.

To make a block appear on the page like a UI element, we need to use the following techniques to implement it:

• Templates (Xsl,tt2,javascript, etc.), convert block declarations into HTML code
• CSS, describing the appearance of the block
• JavaScript, if the block has dynamic behavior
• Image
• Document

Every thing that makes up a block can be used as a block technique.

Real Case

Yandex is a large company (in Russia) that uses the BEM methodology to develop its services.

The BEM methodology does not require you to use some kind of framework. You don't have to use BEM in all the page techniques you use (but that's the most effective).

all of Yandex's services are BEM in CSS and JavaScript code and XSL templates on their pages. For example:

• Yandex.maps
• yandex.images: Provides services for searching images on the internet.
• Yandex.video: Provides both managed and searchable images of the service.
• Yandex.auto
• Turkish Yandex

This service does not use an XSL template but rather uses our latest template technology to build their pages. is the bemhtml template engine we mentioned earlier. Here are the services:

• Yandex Search or Yandex search in 中文版
• Mobile Apps Search: This site is presented on a smartphone.

Some other companies are using BEM.

Mail.us, for example, used BEM in some of their services. The CSS code for some blocks on their page is based on BEM. They also have their own C + + template engine, and write block templates based on the BEM methodology.

More cases:

• Rambler.news
• Headhunter
• TNK Racing Team

You may also be interested in websites that use the BEM-BL block library:

• BEM-based Web Form JZ verification
• Mikhail Troshev vCard: Source code hosted in GitHub.

Learn More

• Defined
• File System organization
• History

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!