CSS BEM Methodology Tutorial for Beginners

In small-scale websites, organizing and managing CSS is not that hard. With a limited number of CSS files, styling can be easily handled. However, in large-scale websites, CSS management can become challenging, particularly when there is no an approach to structure style files and a naming convention for selectors. This is where CSS methodologies like BEM come into play.

Now, it is time to explore BEM: what it is and why it matters. Let's get started.

What is CSS BEM Methodology?

BEM stands for Block, Element, and Modifier. It is a methodology for naming classes in your HTML and CSS 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.

The BEM naming convention defines class structure with a combination of underscores and hyphens as shown below:

• block__element--modifer

Imagine that you have a card component that will be utilized throughout an 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 */
    }
  }
}

&(Ampersand) symbol in SCSS is used to reference the parent selector (in this case, .card) within the nested blocks and elements.

CSS BEM Guidelines

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 tutorial for beginners, we have covered CSS BEM methodology used for organizing and 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.