BEM

How to use BEM

BEM is a naming convention that helps you write better, more maintainable CSS and HTML code. It consists of three parts: Block, Element, and Modifier.

The first part of BEM is the block, which is a standalone component on a page. A block can be anything from a header to a navigation menu to a form. Each block has its own unique name, and all of the classes associated with that block begin with that name.

The second part of BEM is the element. An element is a part of a block, and it should only exist within that block. Elements are identified by the block's name, followed by two underscores and the element's name. For example, if we have a header block with a logo element, the class for that element would be

.

The final part of BEM is the modifier. Modifiers are used to change the appearance or behavior of a block or element. Modifiers are indicated by a double hyphen (

) in the class name. For example, if we want to change the color of our logo to white, we could add a modifier class like this: .

Here's an example of how you could use BEM in your HTML and CSS:

<div class="header">
  <img class="header__logo header__logo--white" src="logo-white.png" alt="Logo">
  <nav class="header__nav">
    <ul class="header__nav-list">
      <li class="header__nav-item"><a class="header__nav-link" href="#">Home</a></li>
      <li class="header__nav-item"><a class="header__nav-link" href="#">About</a></li>
      <li class="header__nav-item"><a class="header__nav-link" href="#">Contact</a></li>
    </ul>
  </nav>
</div>

.header {
  /* styles for the header block */
}

.header__logo {
  /* styles for the logo element */
}

.header__nav {
  /* styles for the nav element */
}

.header__nav-list {
  /* styles for the nav list element */
}

.header__nav-item {
  /* styles for the nav item element */
}

.header__nav-link {
  /* styles for the nav link element */
}

.header__logo--white {
  /* modifier styles for a white logo */
}

In this example, we have a header block with a logo element and a navigation menu element. We've used BEM naming conventions to create classes for each of these components, which makes our HTML and CSS easier to read and understand. We've also used a modifier class to change the color of the logo to white.

Overall, using BEM can help you write more maintainable and organized code. By following a consistent naming convention, you can avoid naming conflicts and make it easier to understand how your HTML and CSS are structured.