Onjsdev

Share


CSS BEM Methodology


By onjsdev

Feb 24th, 2024

In small-scale websites, organizing CSS is not that hard. With a limited number of files, CSS can be easily managed.

However, In large-scale websites, CSS management can become challenging, particularly when selectors are defined randomly. This where CSS methodologies come into play. Because applying a methodology for CSS ensures consistency in the creation of styles, preventing the challenges of managing CSS.

This guide will discuss the one of the mostly used CSS methodologies, BEM. Before delving into BEM, let's take a closer look at what CSS methodologies are and why we should consider using them.

What are CSS Methodologies?

Simply put, CSS methodologies are approaches or strategies for organizing and structuring the code that defines the styles of a web page.

These methodologies provide us guidelines and best practices so that we can write maintainable, scalable, and efficient CSS code.

Most popular ones include:

  • SMACSS (Scalable and Modular Architecture for CSS): SMACSS is an approach that divides styles into five categories: Base, Layout, Module, State, and Theme.
  • OOCSS (Object-Oriented CSS): OOCSS promotes the idea of creating reusable and modular CSS components. It encourages separating structure (layout) from skin (appearance) and reusing styles across different components.
  • Atomic CSS: This methodology involves creating small, single-purpose utility classes that can be combined to build complex layouts. Each class represents a specific style or property, making it easy to compose styles.
  • ITCSS (Inverted Triangle CSS): ITCSS is a scalable and maintainable CSS architecture introduced by Harry Roberts. The architecture is represented as an inverted triangle, and it consists of several layers, each serving a specific purpose.

What is BEM

BEM, which stands for Block, Element, Modifier, is a naming convention for CSS classes that aims to create more maintainable, scalable, and reusable CSS code.

BEM divides web components into three different parts, including:

  • Blocks: Represent independent, reusable components of a web page, like a header, a button, or a form.

  • Elements: Refer to parts of a block, like a title within a header, a price within a product block, or a label within a form field.

  • Modifiers: Represent different states or variations of a block or element, like a button being disabled or a form field being in error.

CSS BEM Naming Convention

The BEM CSS naming convention is structured using underscores and hyphens:

  • block__element--modifer

Now, let's see an example where we have a card component that will be utilized throughout our application.

<div class="card">
  <h2 class="card__title">Card Title</h2>
  <p class="card__description">This is a description of the card.</p>
  <button class="card__button card__button--primary">Primary Button</button>
  <button class="card__button card__button--secondary">Secondary Button</button>
</div>

 <!-- 
 Card (Block) | 
 -----------------------------------
 |  --- title(Element)             |                
 |                                 |
 |    ------                       |
 |   |  RED  | negative(Modifier)  |
 |    ------                       |
 -----------------------------------               
 -->

In this example, card is the block, title, description and button are the elements, and primary and secondary are modifiers.

If you want to style this component with SASS, here is how it looks like:

.card {
  /* Block styles */

  &__title {
    /* Element styles */
  }

  &__description {
    /* Element styles */
  }

  &__button {
    /* Element styles */

    &--primary {
      /* Modifier styles */
    }

    &--secondary {
      /* Modifier styles */
    }
  }
}

Points To Consider

When using the BEM methodology, there are several important points to consider.

Modifiers Also Can Be Applied To Blocks

Modifiers can be applied to both blocks and elements. This allows you to change the appearance or behavior of an entire block, rather than just a single element. For example:

<div class="block block--modifier">
  <div class="block__element"></div>
</div>

Blocks can be nested in each other.

Blocks can be nested inside each other to create complex components. This allows you to create reusable blocks that can be combined in different ways. For example:

<!-- header block -->
<header class="header">
    <!-- Nested contact block -->
    <div class="contact"></div>

    <!-- Nested form block -->
    <form class="form"></form>
</header>

Elements can be nested inside each other.

Elements can also be nested inside each other to create more complex components. This can be useful when you need to create more complex UI elements. For example:

<form class="form"> <!-- Block -->
    <div class="form__content"> <!-- Element -->
        <input class="form__input"> <!-- Element -->
        <button class="form__button">Submit</button> <!-- Element -->
    </div>
</form>

It is not possible to use an element independently of its corresponding block

Elements should always be used within their corresponding block. This helps to prevent naming conflicts and ensures that your code is easy to understand. For example:

 <div class="form"> </div> <!-- Block -->
 <div class="form__content"> </div> <!-- It is wrong -->

An element can not be part of the another element

An element should not be a part of another element. This can make your code more difficult to read and maintain. For example:

<form class="form"> <!-- Block -->
    <div class="form__content"> <!-- Element -->
        <input class="form__content__button"> <!-- It is wrong -->
        <input class="form__content-button"> <!-- It is true -->
    </div>
</form>

A modifier can not be used alone

Modifiers should always be used in combination with a block or element. This ensures that your code is consistent and easy to read. For example:

<div class="form--active"></div> 
<!-- It is wrong because there is no form block element -->

Best Practises

And here is some best practises to consider while using the BEM methodology for naming CSS.

  • Avoid nesting too deeply: While nesting is allowed in BEM, it's important to avoid nesting too deeply. This can make your HTML and CSS difficult to read and maintain. Aim for no more than three levels of nesting.
  • Use clear and concise class names: The BEM methodology encourages the use of descriptive class names. Avoid using abbreviations or acronyms that are not immediately understandable.
  • Keep modifiers simple and reusable: Modifiers should be used sparingly and kept simple. Avoid creating modifiers that only apply to a single instance of a block or element. Instead, create modifiers that can be reused across multiple instances.

Conclusion

In this article, we have covered CSS BEM methodology used for naming CSS classes, along with examples. At the end of the article, let's remind you that BEM methodology is an option for naming CSS, using it may have pros/cons depending on your projects and team.

Thank you for reading.