Sites developers often write that they use BEM when laying pages. Of course, for the uninitiated person it looks like something very solid and technological, which will raise the quality of the site to unprecedented heights. But in fact, everything is much easier and in practice the use or ignoring Bam does not affect anything. Let's deal with more about what it is and for what is needed.

When the developer writes the page code on HTML, it assigns the names of the classes to different elements to then describe their properties in CSS. These names can be completely any - everything is limited to the fantasy of the developer itself.

But in 2007 there was an idea that each block on the page can be independent and the names of classes inside it can be subordinate to some kind of structure. Gradually, this led to the development of some rules, which were called BEM - block, element, modifier.

Therefore, BEM is just a set of rules for writing classes in the HTML code.

The basis of the BEM methodology is the principle of nesting elements and independence of blocks.

The page can be separate parts that can be simply copied and inserted into another place. This is, for example, sections, cards, forms, and much more. If you write styles for a card with a subordination of it to some block, it is easy to move it to another place will not work - you have to correct and add new rules for this card.

When using BEM, the parent unit has a specific name - class, and the names of the elements embedded in it are added through the prefixes.

For example, the search form class can be search, then field classes inside it will be search__input, and the buttons are Search__Button. For the active button, you can add the Search__Button-Active class.

SEARCH shape is an independent unit that can be used on the site anywhere and how many times. In order to change the view of its elements elsewhere, modifiers are used - they are simply added additional classes that are interrupted some styles from already written. For example, in the same form in a footer, you can change the color of the button with the addition of the SEARCH__BUTTON-ACTIVE - RED modifier.

Blocks according to BEM rules are separated by two lower undercutings, elements - hyphens, and modifiers - double defisis.

Such a principle of naming classes first seems difficult and incomprehensible, but you can get used to it.

Strict classes naming structure has some positive properties:

However, many developers still do not seek to use BEM in their work, and there are also their reasons.

The methodology of the naming of classes has quite large drawbacks:

There are other problems that only interfere with the developer.

To adhere to the rules Bamu recommends Yandex, although in general this system is not considered to be generally accepted and mandatory. Use it or not - the choice of the developer itself. After all, these are just rules on the name of the classes for styles.

What gives the use of BEM? If the work is carried out in the team, and the project is large, it will really help avoid problems with the names of the classes and can accelerate the development. The team always needs uniform rules.

But if one person works above the project, it makes no sense to comply with these rules. Especially if it is a lunding or a small site for several pages. The long names of the classes only increase the size of the files and, accordingly, slow down the download of the site - still this extra kilobytes, without which it is quite possible to do.

And in general there are no strict rules that would oblige to use the BEM system. You can touch the pages as with him and without it. Here you just need to evaluate each project individually - sometimes BEM gives some advantages, and sometimes not.