Common mistakes when writing CSS with BEM

Software development is a team effort

When doing software development it is essential to agree on guidelines, technology, and methodologies. Those agreements should be the result of discussions, proof of concepts, knowledge, and sometimes votes. The whole team should be invited to participate because software development is a team effort and everyone likes engaging team members.

At visuellverstehen, we are divided into multiple teams. Some teams agreed on using Block-Element-Modifier (BEM) and other teams agreed on using Tailwind CSS. I think it is super important to agree on one way or the other, while both ways are totally fine for the success of our client projects.

One thing is for sure. If you do not agree, it will become a mess. I have been there.

Learn proper BEM

Now and then new colleagues join our team. Some of them never have heard about BEM before. So they have to learn it and naturally some mistakes will happen. Mistakes are not a problem at all. They are part of the learning process.

Four most common mistakes

To help you learn proper BEM, I wrote down some of the most common mistakes I see in my day-to-day work life.

1. Wrongly nested blocks and elements

It is not allowed to nest blocks. If you start a new block, you are not allowed to proceed with elements from another block.

❌ Wrong

<article class="card">
    <header class="header">
        <h2 class="card__headline"></h2>
    </header>
</article>

✅ Correct

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>

2. Great-grandchildren

There are no grandchildren nor great-grandchildren in BEM. Instead, »normal« elements of the block can be used.

❌ Wrong

<article class="card">
    <header class="card__header">
        <h2 class="card__header__headline"></h2>
    </header>
</article>

✅ Correct

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>

3. Modifiers without a base class

Modifiers cannot exist without a base block or element.

❌ Wrong

<article class="card--highlight">
    <header class="card__header"></header>
</article>

✅ Correct

<article class="card card--highlight">
    <header class="card__header"></header>
</article>

❌ Wrong

<article class="card">
    <header class="card__header--important"></header>
</article>

✅ Correct

<article class="card">
    <header class="card__header card__header--important"></header>
</article>

4. Too big blocks

It is not a good idea to create really big blocks. The idea of BEM is to create modular and reusable blocks.

❌ Wrong

<body class="body">
    <header class="body__header"></header>
    <main class="body__main"></main>
    <footer class="body__footer"></footer>
</body>

✅ Correct

<body class="body">
    <header class="header"></header>
    <main class="main"></main>
    <footer class="footer"></footer>
</body>

Automate stuff

Sometimes it is hard to find mistakes manually. Yesterday I learned there is a BEM linter. I will look into it.

Malte Riechmann

New git guidelines: We have switched to Conventional Commits

Giving teams as much autonomy as possible is a good idea, but having some company-wide guidelines can...

Discover full article

Cleo Pelte

One year of coding – recommendations for beginners from a beginner

This month one year ago I started my three year long journey as a web development trainee/apprentice...

Discover full article

Malte Riechmann

Our tech stack in 2022

Preface Reading about our tech stack from one year ago gives me confidence for the future....

Discover full article
View all articles

Right on the intersection of communication, marketing and digital product development »visuellverstehen« offers innovative solutions and concepts for all areas of corporate communication. No matter if you are a mid tier business, an established brand, a cultural institution, an industrial corporation or a successful trading company we advice and accompany you holistically and honestly.