BEM Methodology
This document explains the BEM (Block, Element, Modifier) methodology for naming CSS classes to maintain consistency and readability in the codebase. It covers the basic principles of BEM, examples of its usage, and best practices.
Getting started with BEM is relatively straightforward. Begin by understanding the basic concepts of Blocks, Elements, and Modifiers. Then, apply these concepts to your CSS code by following the naming conventions outlined in the BEM methodology. There are also many resources available online, such as tutorials and documentation, to help you learn more about BEM and how to implement it effectively.
Overview
BEM stands for Block, Element, Modifier. It is a methodology for organizing and naming CSS classes in a way that enhances code maintainability, scalability, and readability. By adopting BEM, developers can create reusable components and code that is easier to understand and work with.
Block
A Block is a stand-alone entity that is meaningful on its own. It represents a high-level component of the user interface, such as a header, menu, or button. Blocks are the foundation of the BEM structure.
<nav class="menu"></nav>
Element (__)
An Element is a part of a Block that performs a specific function. Elements are always tied to their Blocks and cannot exist independently. They are identified by appending a double underscore (__) to the Block name.
<a class="menu__link"></a>
Modifier (--)
A Modifier is used to change the appearance, behavior, or state of a Block or an Element. Modifiers enable the creation of variations of a Block or an Element without duplicating code. They are appended to the Block or Element name with a double dash (--).
It's important that the modifier class is next to the existing Element and Block class.
<a class="menu__link menu__link--active"></a>
Guidelines / Instructions
- Identify the Block: Determine the main component (e.g.,
nav). - Identify the Elements: Find components within the Block (e.g.,
nav__item,nav__link). - Identify Modifiers: Define variations of Blocks or Elements (e.g.,
nav__item--active,nav__link--disabled).
Best Practices
Tips
- Clear and Consistent Naming: Use straightforward and descriptive names for your Blocks, Elements, and Modifiers. This helps everyone understand what each part of your code does without confusion.
- Keep Things Modular: Break down your user interface into small, reusable pieces. This makes it easier to manage and update your code later on, saving time and effort.
Common Pitfalls
- Overcomplicating Names: Avoid making your BEM class names overly complex or long. Stick to clear, concise names that accurately describe the purpose of each component. This prevents confusion and makes your code easier to maintain.
- Excessive Nesting: Be cautious of nesting Blocks and Elements too deeply within each other. Deeply nested BEM structures can lead to overly specific and convoluted CSS selectors, making your styles harder to override and maintain. Try to keep your BEM hierarchy shallow for better readability and maintainability.
Examples / Use Cases
Always combine the Modifier class with the Block or Element class and not replace it.
<!-- Good -->
<div class="cta-widget cta-widget--has-background"></div>
<!-- Bad -->
<div class="cta-widget--has-background"></div>
Do not use the double underscore more than once for Elements nested within another Element.
<!-- Good -->
<a class="menu__link">
<span class="menu__text">About us</span>
</a>
<!-- Bad -->
<a class="menu__link">
<span class="menu__link__text">About us</span>
</a>
Block elements in a widget should be given a naming convention that indicates which widget they belong to because widgets are already stand-alone components of themselves.
<!-- Good -->
<div class="stores-widget">
<div class="stores-widget__tile"></div>
</div>
<!-- Bad -->
<div class="stores-widget">
<div class="stores-tile"></div>
</div>
Tools and Resources
Tools:
- BEM Cheat Sheet
- CSS Linting tools like Stylelint
Resources: