What is the CSS BEM Methodology?

You can also watch the video on our Youtube channel instead of reading the article 👇

For small-scale websites, organizing and managing CSS is relatively straightforward. With only a limited number of CSS files, styling can be handled with ease. However, on large-scale websites, CSS management becomes much more challenging, especially if there is no structured approach for organizing files and naming selectors. This is where CSS methodologies like BEM come into play.

So, let’s explore what BEM is and why it matters.

What is BEM?

BEM stands for Block, Element, and Modifier. It is a naming convention for CSS classes that helps maintain consistency and readability in your styles.

BEM divides web components into three distinct parts:

• Block: Represents independent, reusable components of a webpage.
• Element: Refers to parts of a block that have a specific function or role.
• Modifier: Indicates different states or variations of a block or element.

For example, imagine you have a card component that is used throughout your application. In this context,

• the card is the block,
• the image, description, title, and button are the elements of that block
• The color variation named primary is considered a modifier.

BEM Class Structure

The BEM naming convention defines class structures using a combination of these three components(block, element, modifier), along with underscores and hyphens.

Following this pattern, the HTML code for this card component can be structured accordingly.

<div class="card">
  <div class="card__image">
    <img src="path/to/image.jpg" alt="Card Image">
  </div>
  <div class="card__content">
    <h2 class="card__title">Card Title</h2>
    <p class="card__description">
      This is a description of the card component. It provides additional details and information.
    </p>
    <button class="card__button card__button--primary">Learn More</button>
  </div>
</div>

With the power of SASS parent selectors, this card component can be easily styled.

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  &__image img {
    width: 100%;
    height: auto;
    display: block;
  }

  &__content {
    padding: 16px;
  }

  &__title {
    font-size: 1.5rem;
    margin: 0 0 8px;
  }

  &__description {
    font-size: 1rem;
    color: #666;
    margin: 0 0 16px;
  }

  &__button {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #333;
    color: #fff;
    transition: background-color 0.3s ease;

    &--primary {
      background-color: #007bff;

      &:hover {
        background-color: #0056b3;
      }
    }
  }
}

When using the BEM methodology, keep the following points in mind:

• Modifiers can be applied to both blocks and elements. This allows you to change the appearance or behavior of an entire block or a single element as needed.
• Blocks can be nested inside each other to create complex components. This enables you to build reusable blocks that can be combined in different ways.
• Elements can also be nested inside each other to construct more intricate components, which is useful when creating complex UI elements.
• Elements should always be used within their corresponding block. This helps prevent naming conflicts and ensures your code remains easy to understand.
• Elements should not be part of other elements, as this can make your code more difficult to read and maintain.
• Modifiers should always be used in combination with a block or an element to ensure consistency and readability.

Conclusion

As we conclude this article, it’s important to note that while the BEM methodology offers a solid approach for naming CSS classes, it’s not the only option. Using BEM may have its pros and cons depending on the nature of your project and the preferences of your team.

Thank you for reading!