The BEM methodology is a variant of writing class names in HTML code developed by Yandex. It stands for “block, element, modifier”. This style of writing class names allows you to more accurately build a hierarchy within the document, not to get confused in the name and functionality of elements when setting styles in CSS or behavior in a JS script. BEM also helps to come up with an unlimited number of classes that will not be repeated among themselves. This is very true for large documents, where there are many almost identical blocks, which, nevertheless, need to be assigned unique styles.
Initially, BEM was created for Yandex’s internal needs and was not merged into a common methodology. Gradually, the development teams decided to standardize the rules and make them the standard for the company. Now, BEM is used by most developers from Russia, the CIS, and even from far abroad.
What tasks does the use of the BEM methodology solve?
Developers from Yandex, when creating the methodology, were going to solve the following problems:
- Comprehensibility of the code both for the developer himself and for other developers. The fact is that the lack of a generally accepted structure creates confusion and complicates the workflow. A developer who is familiar with BEM will be able to quickly understand both his own code even after several years, and the code of colleagues.
- The ability to reuse any block of code without having to write everything from scratch. In the case of BEM, it is enough to create a base with classes and identifiers in advance, which will be used as ready-made developments as the code is written.
- Communication between different project specialists: designers, managers, developers. All of them should call things by roughly the same names in order to work more efficiently.
- Rapid integration of specialists from different teams. When code is written in all teams according to a universal methodology, the integration process is faster.
- The entry threshold when moving from project to project is greatly reduced when using universal methodologies.
BEM is useful not only for companies and development teams, but also for freelancers. Due to the fact that the methodology is included in the professional environment, the quality and speed of work on projects increase. Even a novice developer can master the principles of BEM without any problems – in fact, these are the rules for naming elements in layout.
Basic layout rules
Previously, large projects were a set of static HTML pages with files with styles and scripts attached to them. If it was necessary to make some changes to the project, then we had to “shovel” all the files and make them manually. With the use of methodologies like BEM, the process has been greatly simplified – you just need to replace the name of the class or make the necessary postscript to it. Also, using BEM helps to make CSS files more structured, without having to do a bunch of code blocks for the same element.
At its core, BEM uses three interrelated components:
- “Block” is the most important, it includes the remaining two elements;
- “Element” – some part of the block, for example, a button or a title;
- “Modifier” is some specific characteristic of a particular element or block, for example, a block with a shadow or a button with a gradient.
Next, we will analyze in detail all the nuances of working with each of the three components within the framework of the BEM methodology.
Block
The main and functionally independent element of each page. It is envisaged that it can have its own behavior, styles, templates, documentation, and so on. The entire page consists of interconnected blocks. Sometimes even other blocks can be nested in the main block, if the task cannot be correctly implemented through the use of elements. They can be used anywhere on the page, repeated among themselves. Identical blocks even sometimes “roam” from project to project.
A block is the basis of any page, so in the BEM naming system, the name of the block comes first in the class. For example, nav is the general name of the navigation section.
Element
This is already an integral part of the block; therefore, it cannot be used in isolation from the parent, therefore, it inherits some of the properties from it. Unlike blocks, it is not recommended to nest other elements inside an element, although it is technically possible. If this is necessary, then it is better to designate a separate block. Let’s take an example with nav:
- The logo and the phone can be taken out as elements, since it is unlikely that any additional components will be placed inside them, except for the picture and the link;
- The menu, if it is complex, it is better to arrange it as a nested block. If this is a simple enumeration of items in a list, then it can be formatted as an element.
Such recommendations for working with elements are due to the fact that if you make investments, it will be more difficult to make adjustments. Consequently, the whole essence of the BEM methodology is lost in this case.
Modifier
These are already defined properties of a block or element, for example, an indication of color, state, behavior. If elements cannot be without a block, and a block cannot be without elements, then the use of modifiers is optional. Modifiers can have additional values besides the name itself.
Usually, with the help of modifiers, you can quickly change the cosmetic and some functional parameters of a block/element.
Rules for naming in BEM
When setting a name for components in BEM, you must adhere to the following rules:
- Each BEM component must have its own class. The use of identifiers is not recommended.
- CSS properties can be nested, but must be written exclusively through classes.
- Separation of words in the title is done with a hyphen (-). It is used only to separate two words in the name of a block, element or modifier, but not to separate different groups!
- A double underscore (__) is used to separate the element name from the block name. For modifier separation single (_).
- All names are recommended to be written in Latin letters in lower case. You can put numbers, but it is not desirable.
Here are some examples of BEM titles:
- container – block name;
- container__article is the name of the article element that is inside the container block;
- container__article_blue-bg is the name of the modifier applied to the article element in the container block;
- container__button_desabled is the boolean name of the button modifier in the container block.
Next, let’s take a closer look at how to work with BEM in HTML and CSS.
Recording BEM names in HTML
Here, the elements are assigned a class, the name of which is compiled in accordance with the BEM methodology. Here is an example piece of code:
<div class=”block-name”>
<div class=”block-name_elem_red”></div>
<div class=”block-name_elem_black”></div>
</div>
In this simple example, a block of code is bound to a single DOM node, but a DOM node can technically have multiple names, which is commonly referred to as a mix. It is used for:
combining the classification of several BEM components without the need for code duplication;
- The use of different naming options, for example, regular and BEM classes;
- Perform positioning of nested elements inside the parent without resorting to the creation of additional modifiers.
Here is a clear example of using this approach: the project uses standardized button styles, but they do not include, for example, the task of margins. Your task is to place the button in the designated block and set its padding. You can, of course, come up with an additional class for it, copy most of the properties into it and add more external indents. However, mixins allow you to simplify this process by separating the block and the element:
<div class=”search form”>
<div class=”button search-form__button”></div>
</div>
In the considered example, the button class loads the main styles for the button, and the search-from__button class allows you to set unique styles specifically for buttons located inside the search-from block.
Directory design rules
In small projects, they can be neglected, but in large projects, the BEM methodology can be used to build a file hierarchy. It boils down to a breakdown into three main directories:
- common – files and folders suitable for most projects are entered here;
- example – a folder for examples, but often html-files of projects are taken out here, for example, index.html;
- service – for different specific implementations used only in this particular project.
Here is an example structure:
common/
css/
js/
xml/
xsl/
example/
html/
service/
auto/
css/
xml/
Rules for working with BEM in CSS
Thanks to the grouped names in CSS, it’s very easy to nest, especially if you’re using preprocessors. Here is an example of styles in BEM using preprocessors:
.block-name:
block styles
&__element-name:
nested element styles
&_active:hover:
hover element styles
And here is an example of implementation without using preprocessors:
.button_hovered .button_text
{
text-decoration: underline;
}
.button_theme_islands .button_text
{
line-height: 1.5;
}
BEM libraries
To simplify work with BEM, you can find several libraries in open source, including official ones and unofficial ones from third-party developers. Here are two basic ones:
- bem-core is a library with basic blocks that contains the i-bem JS framework and 20 helper blocks to speed up BEM development.
- bem-components is a library with ready-made visual components that are universal for most projects. Inside there are several form controls and basic elements for working with interfaces.
The bem-components library can be included in the same way as Bootstrap: add pre-built library files and insert them into HTML pages using the link and script elements:
<link rel=”stylesheet” href=”https://yastatic.net/bem-components/latest/desktop/bem-components.css”>
<script src=”https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js”></script>
Advantages and disadvantages of BEM
Advantages:
- Uniformity. Even after a cursory inspection of the code, you can understand what blocks the page consists of, what elements are nested in them, how they will behave on the page. This greatly simplifies both the development and support of the finished project.
- Flexibility. The use of modifiers, a hierarchical structure allows you to quickly adapt the project to changing requests, as well as to different device formats.
- It is convenient to work in a team. Firstly, you and your colleagues perfectly understand the structure and sequence, and secondly, thanks to the independence of the blocks, you can work on different interface elements at the same time.
- Simple optimization. Instead of digging into the code and looking for a place that needs to be rewritten, you can replace a separate block. At the same time, you can not be afraid that the layout will fall apart while making changes.
And here are the disadvantages:
- HTML elements can have very long names that are hard to write down but easy to remember because they follow a predefined logic.
- Layout according to the template given in BEM is not always convenient.
About the prospects of BEM
Among developers from the CIS, BEM is becoming more and more popular – many teams are switching to this system. Even a novice layout designer is recommended to study this methodology in order to successfully find a job.
In the West, local alternatives are popular: SMACSS and ECSS. In general, they are similar to BEM, but have some peculiarities. In the first case, there is no such hard emphasis on the names of the components. Secondly, the emphasis is on independent components. Nevertheless, domestic BEM is also gaining popularity among Western developers.
Conclusion
If you want to engage in layout and interface development, then study the BEM methodology at least at a basic level. Its use will make the code more structured, easily maintained, and will make it easier to set the style of the project. Despite the fact that you have to give complex class names to the components, the layout process itself will be greatly accelerated, and you will be less confused in the finished code.