How BEM (Block-Element-Modifier) CSS actually Work!

BEM, or Block-Element-Modifier, is a popular naming convention for writing CSS code. It was developed by the team at Yandex, a Russian search engine, as a way to create scalable and maintainable CSS code for their large and complex web projects. BEM has since become widely adopted by developers around the world and is recognized as one of the best practices for writing CSS.

The basic idea behind BEM is to create modular, reusable code blocks that can be combined to build larger web components. Each block represents a distinct part of the user interface, such as a header, footer, navigation menu, or form. Blocks can then be broken down into smaller elements, which are the individual components that make up the block. For example, a navigation menu block might consist of elements like the menu items, the logo, and the search bar.

BEM also allows for the use of modifiers, which are used to change the appearance or behavior of a block or element. Modifiers can be used to change the color, size, or layout of a block, or to add or remove certain features or functionality.

The naming convention used in BEM is what makes it so powerful. Each block, element, and modifier is given a unique, descriptive name that reflects its purpose and function. This makes it easy for developers to understand and organize their code, and for designers to make changes to the design without breaking the CSS.

Here's an example of how BEM might be used to stylea simple navigation menu:

HTML:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
    <li class="nav__item"><a href="#" class="nav__link nav__link--active">About</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
  </ul>
</nav>

CSS:

.nav {
  /* Styles for the navigation block */
}

.nav__list {
  /* Styles for the navigation list element */
}

.nav__item {
  /* Styles for the navigation item element */
}

.nav__link {
  /* Styles for the navigation link element */
}

.nav__link--active {
  /* Modifier for the active navigation link */
}

In this example, the "nav" block represents the overall navigation menu. The "nav_list", "navitem", and "navlink" elements represent the different parts of the navigation menu. The "nav_link--active" modifier is used to style the active link in the navigation menu.

One of the key benefits of BEM is that it allows for easy modification of the CSS code. If you need to change the style of the active navigation link, for example, you can simply update the "nav__link--active" modifier without affecting any ofthe other parts of the navigation menu. This makes it easier to maintain and update the CSS code over time, and reduces the risk of introducing errors or breaking the design.

Another benefit of BEM is that it promotes modularity and reusability of code. By breaking down the user interface into smaller blocks and elements, developers can create more flexible and adaptable components that can be used across different parts of the website. This can help to speed up development time and reduce code redundancy, which is especially important for large and complex web projects.

Overall, BEM is a powerful and flexible naming convention for writing CSS code. By using descriptive and consistent names for blocks, elements, and modifiers, developers can create more maintainable and scalable code that is easier to understand and modify over time. If you're looking for a best practice for writing CSS, BEM is definitely worth considering.

Learn More:

getbem.com/introduction