BEM methodology. What it is and how to work with it

Introduction to BEM

BEM (Block, Element, Modifier) is a methodology for organizing code that helps developers write convenient and easily supported CSS and HTML. It was created by Yandex to solve the problem of intricate styles and complexity in scaling web applications.

Imagine that you are building a constructor, and each piece of code is a block or element that can be easily replaced, changed, or improved. BEM makes the code modular and understandable, which is especially useful if you work in a team or the project will develop for many years. BEM helps to avoid confusion and keep the code in order, even if dozens of developers are involved in the project. 🎯

Basic concepts of BEM

The BEM methodology is based on three key concepts:

1. Block

A block is an independent, self-contained interface element that can be reused. For example, a button, a form, a menu — all these are blocks. Blocks can be nested in each other, but they remain independent.

Block example:

<div class="button">Купить</div>

Blocks are the basic building blocks from which the interface is built. They may contain elements that depend on the block and cannot exist separately.

2. Element

An element is a part of a block that cannot exist separately from it. Elements help to break the block into its constituent parts, while the elements always belong to a specific block. They add additional features and visual components, but remain tied to their block.

Example of an element:

<div class="button">
  <span class="button__text">Купить</span>
</div>

Here button__text is an element of the block button. Pay attention to the two lower underscores (__) — this is the standard designation of the element in BEM. Such naming helps to avoid conflicts in styles and immediately understand which block includes this element.

3. Modifier

A modifier is a property that changes the appearance or behavior of a block or element. For example, a modifier can change the color of a button depending on its state or add additional functionality.

Modifier example:

<div class="button button--active">Купить</div>

Here button--active is the modifier of the block button. Two hyphens (--) are used to indicate a modifier. Modifiers allow you to add or change the properties of a block without affecting its basic structure.

Why do you need BEM?

In fact, the code can be written in different ways, and you have probably already seen styles that are difficult to understand. 🤔 When classes have incomprehensible names or are too closely related to each other, editing such code becomes a real headache.

BEM helps to solve these problems:

• Improves code readability. Even if you see the code for the first time, it is easy to understand what the class names refer to. Each class gives a complete idea of how the element is embedded in the interface.

• Avoids style conflicts. Since each block, element, and modifier has a unique name, the styles will not overlap randomly. This is especially important when working on large projects, where the same styles can be used in different parts of the interface.

• Ease of scaling. If the project grows, adding new elements or changes is easier, since each block and element are clearly separated from each other. When the code is organized according to the BEM methodology, it is easier to maintain and expand without fear of breaking the existing functionality.

• Simplifies teamwork. Thanks to clear naming rules, all team members can easily understand the code and work with it, even if they did not participate in its creation initially.

How to work with BEM

To start using BEM, you do not need to have any special knowledge. All that is required is an understanding of HTML and CSS, as well as a desire to organize the code in a more structured way. BEM is easily integrated into any project, and with its help you can simplify work on both small and large projects.

Example of using BEM in practice

Let's say we have a product card. Let's imagine its structure using BEM:

<div class="product-card">
  <div class="product-card__image">
    <img src="/path/to/image.jpg" alt="Product image">
  </div>
  <div class="product-card__details">
    <h3 class="product-card__title">Название товара</h3>
    <button class="product-card__button product-card__button--buy">Купить</button>
  </div>
</div>

Here:

• product-card is a block that represents the entire product card. It is a standalone component that can be easily moved or reused elsewhere.

• product-card__image and product-card__details are elements that belong to the product-card block. They describe different parts of the card and depend on the block.

• product-card__button--buy is a button modifier that can change its behavior (for example, make it green for a call to action). This is convenient when you need to create different versions of the same element without changing its base class.

Pros and cons of using BEM

Advantages:

1. Readability and clarity. Classes have a logical structure and describe what they refer to, which simplifies their understanding.

2. Easy to maintain and develop. The code written by BEM is easy to expand. New blocks and elements are added without the risk of breaking the existing functionality.

3. Minimizing style conflicts. Thanks to the unique class names, the possibility of random style intersections is excluded.

4. Versatility. The methodology is suitable for both small and large projects. It ensures order in the project regardless of its scale.

Cons:

1. Name redundancy. Long class names may seem inconvenient, especially at the initial stage, but it helps to avoid conflicts and confusion.

2. Requires discipline. In order to fully comply with BEM, you need to carefully monitor the naming and structure of classes, which may require some time to get used to.

What skills do you need to work with BEM?

To start working with the BEM methodology, you need basic knowledge of HTML and CSS. Here are some key things that will help:

• Understanding CSS classes. You need to be able to create classes and name them correctly. This is the basis of working with BEM, since the entire structure of the methodology is based on class names.

• Desire to organize the code. BEM is about structure and order, so it is very important to strive to make the code clean and logical. The more carefully you approach the creation of blocks and elements, the easier it will be to maintain the project in the future.

• Knowledge of the principles of modularity. BEM divides the entire interface into independent blocks, so it is important to think in terms of small components. Each component must be autonomous and not depend on other parts of the interface.

• Teamwork skills. If you work in a team, understanding and using BEM makes the work more coherent and understandable for all participants.

Conclusion

BEM methodology helps to make your code more structured, readable and easy to maintain. ✨ Even if it seems too difficult to you now, believe me — as soon as you start using BEM, organizing the code will become easier and more pleasant. BEM creates clear rules that are easy to follow, which makes development more efficient and understandable.

In addition, BEM helps to avoid typical mistakes associated with confused styles and inconvenient class names. This is especially important when the project is growing and many developers are involved in it. Each block and element is clearly separated, and their unique names help to avoid conflicts and misunderstandings. When the project becomes larger, the structure proposed by BEM helps to easily add new functions and maintain the old ones.

We hope this article has helped you understand the basic principles of BEM and inspired you to use this methodology in your projects! If you are just starting your journey in web development, try to apply BEM on small examples to feel its benefits in practice. You will see how the organization of the code will become simpler and clearer. 😊

If you are interested in this topic, write to us, and we will make a mini-course on working with BEM in the simplest and most understandable language! 💻📚