BEM methodology: A simple and effective way to write CSS

Photo by FONG on Unsplash

BEM methodology is a CSS naming convention that helps you write more maintainable, modular, and scalable CSS. It’s based on the idea of breaking down your CSS code into smaller, more reusable components.

The BEM methodology stands for Block, Element, and Modifier.

Block

A block is a self-contained CSS component that has its own unique style. For example, a button, a navigation bar, or a header would all be considered blocks.

Element

An element is a part of a block. For example, a button’s text or a navigation bar’s link would be considered elements.

Modifier

A modifier is a variation of a block or element that changes its style in some way. For example, a disabled button or a highlighted link would be considered modifiers.

To name your CSS classes using BEM, you simply combine the block name, element name, and modifier name, with each part separated by a double hyphen.
For example:

.button {
 /* Block styles */
}

.button-primary {
 /* Modifier styles */
}

.button__text {
 /* Element styles */
}

This naming convention makes it easy to identify and style specific parts of your CSS code. It also makes it easy to reuse your CSS code across different components.

Here’s an example of how to use BEM methodology to style a button:

HTML

<button class="button button–primary">Click me!</button>

CSS

.button {
 display: inline-block;
 padding: 10px;
 border: 1px solid black;
 cursor: pointer;
}

.button-primary {
 background-color: blue;
 color: white;
}

.button__text {
 font-size: 16px;
}

In this example, we have a block called button. The element is text and the modifier is primary. This CSS code will style the button to be blue with white text.

BEM methodology is a powerful tool that can help you write better CSS code. It’s especially useful for large and complex projects.
Here are some of the benefits of using BEM methodology:

Maintainability

BEM code is more maintainable because it’s easy to identify and style specific parts of the code.

Modularity

BEM code is more modular because it’s easy to reuse CSS code across different components.

Scalability

BEM code is more scalable because it’s easy to add new components and features without breaking existing code.

Here are some tips for using BEM:

• Use descriptive names for your blocks, elements, and modifiers.
• Use a consistent naming convention throughout your code.
• Avoid using global CSS selectors. Instead, use BEM classes to target specific parts of your code.
• Use BEM classes to create reusable CSS components.
• Use BEM modifiers to create variations of your CSS components.

BEM methodology is a simple but effective way to write CSS code. By following the tips above, you can start using BEM methodology today to improve the quality of your CSS code.

In the below example, we have a block called header. The element is logo and the modifier is sticky. This CSS code will style the header to have a sticky logo.

HTML

<header class="header">
  <img class="header__logo header__logo–sticky" src="logo.png" alt="Logo">
</header>

CSS

.header {
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 height: 60px;
 background-color: white;
 z-index: 1;
}

.header__logo {
 position: absolute;
 top: 10px;
 left: 10px;
}

.header__logo-sticky {
 position: fixed;
}

BEM methodology can be used to style any type of CSS component, from simple buttons to complex navigation bars. It’s a powerful tool that can help you write better CSS code.