Introduction to BEM: A Simple Guide to Better CSS

If you are a web developer, you know how important it is to have clean, well-organized, and maintainable CSS code. One way to achieve this is by using a naming convention that helps you structure your code in a logical and consistent way. One popular naming convention is BEM (Block-Element-Modifier), which is widely used in the web development community. In this article, we will look at what BEM is and how to get started with it.

What is BEM?

BEM is a naming convention for CSS class names. It helps you structure your CSS code in a logical and consistent way. BEM divides your CSS code into three parts: blocks, elements, and modifiers.

• A block represents a standalone component, such as a header or a footer.
• An element represents a part of a block, such as a menu item or a button.
• A modifier represents a variation of a block or element, such as a different color or size.

How to Use BEM

To use BEM, you need to decide on a naming convention for your blocks, elements, and modifiers. One popular convention is to use hyphens to separate the different parts of a BEM class name, like this:

.block {}
.block__element {}
.block__element--modifier {}

In this convention, the block is represented by the .block class, the element is represented by the .block__element class, and the modifier is represented by the .block__element--modifier class.

Here is an example of how you can use BEM in your CSS code:

.header {
  background-color: #333;
  color: #fff;
}

.header__menu {
  display: flex;
  list-style: none;
}

.header__menu-item {
  flex: 1;
  text-align: center;
}

.header__menu-item--selected {
  background-color: #666;
}

This code defines styles for a header block with a menu element and a selected modifier.

• The .header class represents the block and sets the background color to dark grey (#333) and the text color to white (#fff).
• The .header__menu class represents the element and sets the display property to flex to create a flex container and the list-style property to none to remove the default list styling. This allows us to create a horizontal menu with equal-width menu items.
• The .header__menu-item class represents the element and sets the flex property to 1 to make the menu items equally flexible and the text-align property to center to align the text in the center.
• The .header__menu-item--selected class represents the modifier and sets the background color to a lighter grey (#666) to highlight the selected menu item.

You can then use these BEM class names in your HTML code like this:

<header class="header">
  <ul class="header__menu">
    <li class="header__menu-item">Home</li>
    <li class="header__menu-item header__menu-item--selected">About</li>
    <li class="header__menu-item">Contact</li>
  </ul>
</header>

Here is another example of using BEM in CSS code:

/* Block */
.navbar {
  /* Navbar styles go here */
}

/* Element */
.navbar__item {
  /* Navbar item styles go here */
}

/* Modifier */
.navbar__item--active {
  /* Active navbar item styles go here */
}

In this example, the .navbar block represents a navigation bar that can be used on your website or application. The .navbar__item element represents a single item in the navbar, and the .navbar__item--active modifier represents the style for an active navbar item (e.g. the current page).

You can use BEM to create a variety of reusable components in your CSS code, such as buttons, forms, and cards. By following the BEM naming convention, you can create clear, self-contained components that are easy to understand and maintain.

Here is an example of how you might use BEM to create a button component:

/* Block */
.btn {
  /* Button styles go here */
}

/* Modifier */
.btn--secondary {
  /* Secondary button styles go here */
}

/* Modifier */
.btn--large {
  /* Large button styles go here */
}

In this example, the .btn block represents a standalone button element that can be used on your website or application. The .btn--secondary and .btn--large modifiers represent variations of the button with different styles.

By using BEM in your CSS code, you can create reusable, modular components that are easy to understand and maintain. By following the BEM naming convention, you can create clear, self-contained components that are easy to style consistently.

Now that you understand the basic concepts of BEM and how to create BEM class names, you can start using BEM in your CSS code. Here are a few tips to help you get started:

1. Use BEM consistently: To get the most benefit from BEM, it’s important to use it consistently throughout your CSS code. This will help you create a logical and consistent structure for your code and make it easier to maintain.
2. Think about the structure of your code: Before you start writing your CSS code, it’s a good idea to think about the structure of your code and how you want to organize your blocks, elements, and modifiers. This will make it easier to write your code and make it more maintainable.
3. Use BEM in combination with other techniques: BEM is just one tool in your toolbox for creating clean and maintainable CSS code. You can use it in combination with other techniques such as SMACSS, OOCSS, or Atomic Design to create a flexible and scalable CSS architecture.