BEM: The Block, Element, Modifier Methodology for Organizing Your CSS

The BEM methodology is a popular naming convention for CSS classes that helps developers write more maintainable, scalable, and reusable code. It's based on organizing your CSS code into logical units called blocks, elements, and modifiers. This article will give you an overview of the BEM methodology and how you can use it to improve your CSS code.

What is BEM?

BEM stands for Block, Element, Modifier. It's a naming convention that uses hyphens and double underscores to separate different parts of a CSS class.

• Block: A block is a standalone component of your UI, such as a button, navigation bar, or modal.
• Element: An element is a child of a block, such as an icon inside a button or a list of items inside a navigation bar.
• Modifier: A modifier is a variation of a block or element. For example, you might have a button modifier for a disabled state or a primary button modifier.

Here is an example of how the BEM methodology would be used to name the CSS classes for a button:

.button {
  /* Block styles */
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.button__icon {
  /* Element styles */
  margin-right: 5px;
  font-size: 16px;
}

.button--primary {
  /* Modifier styles */
  background-color: #007bff;
  color: #fff;
}        

Benefits of using BEM

There are many benefits to using the BEM methodology, including:

• Improved maintainability: BEM makes your CSS code easier to read and understand, which makes it easier to maintain and update in the future.
• Increased scalability: BEM helps you write more reusable CSS code, which can be used for different components on your website.
• Reduced code duplication: BEM helps you avoid code duplication by encouraging you to write modular styles.
• Better class specificity: BEM classes are more specific, which can help to prevent unexpected CSS overrides.

Getting started with BEM

If you're new to BEM, here are a few tips for getting started:

• Start with small projects.
• Use a BEM naming convention checker to help you write correct BEM class names.
• Use a CSS preprocessor like Sass or Less to make your BEM code more concise.
• There are many online resources available to help you learn more about BEM.

Summary

The BEM methodology is a powerful tool for organizing your CSS code. Using BEM, you can write more maintainable, scalable, and reusable code. If you're not already using BEM, I encourage you to give it a try. You might be surprised at how much it can improve your CSS code.

I hope this article has been helpful. If you have any questions, please feel free to comment below.

Additional resources

• https://en.bem.info/methodology/
• https://github.com/khaledayed/BEM-CSS-Example
• https://www.pullrequest.com/blog/bem-and-sass-whats-the-difference-and-how-to-use-them/

I hope this is useful!