Block Element Modifier (BEM) is a popular convention for writing CSS. It was introduced by Yandex, a Russian search engine company, and has gained popularity in the web development community due to its clarity and ease of use. In this post, we'll explore what BEM is, why it's useful, and provide some examples to help beginners understand how to use it.

What is BEM?

BEM is a naming convention for CSS classes that helps developers write more maintainable and scalable CSS. It involves breaking down web pages into components, called blocks, and assigning unique class names to each block and its related elements and modifiers.

A block is a standalone component on a web page. It could be a header, a sidebar, a menu, or any other component that has a specific purpose.

An element is part of a block that performs a particular function. For example, in a header block, elements could be a logo, a navigation menu, and a search box.

A modifier is a variation of a block or an element. It could be used to change the appearance or behaviour of a block or an element. For example, a modifier could be used to change the color or size of a button.

Why is BEM useful?

BEM provides a clear and consistent naming convention for CSS classes, making it easier for developers to understand the structure of HTML and CSS. It also helps developers write more maintainable and scalable CSS code, which is essential for large-scale web projects.

BEM is also useful because it helps to avoid CSS specificity issues. By using unique class names for each block, element, and modifier, we can avoid using descendant selectors, which can lead to specificity issues and make it harder to write and maintain CSS code.

How to use BEM

To use BEM, we need to follow a specific naming convention for CSS classes. Here's an example of how we could use BEM to style a navigation menu:

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link" href="#">Home</a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="#">About</a>
    </li>
    <li class="menu__item">
      <a class="menu__link--active" href="#">Contact</a>
    </li>
  </ul>
</nav>

In this example, we have a navigation menu block, which has a unique class name of "menu." Inside the block, we have a list element, which is an element of the menu block and has a class name of "menu__list."

Each list item is an element of the list and has a class name of "menu__item." Each link is an element of the list item and has a class name of "menu__link." The "menu__link--active" class is a modifier of the "menu__link" element and is used to style the active link.

By following this naming convention, we can easily see the structure of the HTML and CSS and understand how each element is related to the others.

Conclusion

BEM is a powerful naming convention for CSS that can help developers write more maintainable and scalable CSS code. By breaking down web pages into blocks, elements, and modifiers and assigning unique class names to each, we can create a clear and consistent naming convention that makes it easier to understand the structure of the HTML and CSS. With BEM, we can avoid CSS specificity issues and write more efficient CSS code, which is essential for large-scale web projects.