BEM: The Best Way To Write CSS

BEM, as its name implies, means Block Element Modifier. If you don't write much CSS because you use Tailwind, then maybe this article is not for you, but it can still teach you a lot about how to write good CSS.

Also, a lot of people move to Tailwind because they find CSS cluttered, but the truth is that Tailwind is a lot more cluttered than CSS. If you write good CSS, it can be much cleaner than the alternatives.

So let's take a deep dive into how you can transform your entire CSS workflow with this simple way of writing CSS.

Introduction

Before we start talking I am going to share with you an example code snippet.

<style>
// Classic CSS
#opinions_box h1 {
    margin: 0 0 8px 0;
    text-align: center;
}

#opinions_box {
    p.more_pp {
        a {
            text-decoration: underline;
        }
    }

    input[type="text"] {
        border: 1px solid #ccc!important;
    }
}

// BEM CSS
.opinions-box {
    margin: 0 0 8px 0;
    text-align: center;

    &__view-more {
        text-decoration: underline;
    }

    &__text-input {
        border: 1px solid #ccc;
    }

    &--is-inactive {
        color: gray;
    }
}
</style>

As you can see BEM is a lot cleaner way of writing CSS. Also you need to keep in mind that it is a methodology. You don't need to install anything. You just change the way you think.

Blocks

Blocks are encapsulated and standalone blocks of code that are meaningful on their own.

Blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.

<header class="layout__header header">
            <div class="header__logo">My Website</div>
            <nav class="header__nav">
                <ul class="header__menu">
                    <li class="header__menu-item"><a href="#" class="header__menu-link">Home</a></li>
                    <li class="header__menu-item"><a href="#" class="header__menu-link">About</a></li>
                    <li class="header__menu-item"><a href="#" class="header__menu-link">Contact</a></li>
                </ul>
            </nav>
</header>

As you can see here we have one block inside the other. Layout is the one block and Header is the other block.

Elements

Elements are the constituent parts of a block that have no standalone meaning and are semantically tied to their block. They are typically represented by two underscores connecting the block and the element.

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav">
    <div class="header__nav-item"></div>
  </div>
</div>

In this example, header__logo, header__nav, and header__nav-item are elements of the header block.

Modifiers

Modifiers are used to change the appearance, behavior, or state of a block or element. They are typically represented by two hyphens connecting the block or element and the modifier.

<div class="header header--dark">
  <div class="header__logo"></div>
  <div class="header__nav header__nav--expanded">
    <div class="header__nav-item header__nav-item--active"></div>
  </div>
</div>

In this example, header--dark, header__nav--expanded, and header__nav-item--active are modifiers that alter the appearance or behavior of the respective blocks and elements.

Benefits

The BEM methodology offers several benefits, including improved code readability and maintainability. By using a consistent naming convention, BEM makes it easier to understand the structure and relationships within your HTML and CSS.

This approach also promotes reusability and scalability, allowing developers to manage and update styles more efficiently. Additionally, BEM helps in avoiding CSS conflicts and specificity issues, leading to more predictable and stable styling across your project.

Conclusion

In conclusion, adopting the BEM methodology can significantly enhance your CSS workflow by promoting cleaner, more organized, and maintainable code. By adhering to its structured naming conventions, you can avoid common pitfalls such as CSS conflicts and specificity issues, ultimately leading to a more efficient and scalable development process.

Whether you're new to CSS or looking to refine your skills, BEM offers a practical and effective approach to writing better CSS.

Thanks for reading, and I hope you found this article helpful. If you have any questions, feel free to email me at kourouklis@pm.me, and I will respond.

You can also keep up with my latest updates by checking out my X here: x.com/sotergreco