DEV Community

Malte Riechmann for visuellverstehen

Posted on • Updated on • Originally published at happy-coding.visuellverstehen.de

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>
Enter fullscreen mode Exit fullscreen mode

✅ Correct

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

✅ Correct

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

✅ Correct

<article class="card card--highlight">
    <header class="card__header"></header>
</article>
Enter fullscreen mode Exit fullscreen mode

❌ Wrong

<article class="card">
    <header class="card__header--important"></header>
</article>
Enter fullscreen mode Exit fullscreen mode

✅ Correct

<article class="card">
    <header class="card__header card__header--important"></header>
</article>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

✅ Correct

<body class="body">
    <header class="header"></header>
    <main class="main"></main>
    <footer class="footer"></footer>
</body>
Enter fullscreen mode Exit fullscreen mode

Automate stuff

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

Top comments (19)

Collapse
 
e5pe profile image
Esperanza Cutillas Rastoll

Thanks, I am learning BEM and this is helpful :)

Collapse
 
malteriechmann profile image
Malte Riechmann

Glad it helps :)

Collapse
 
yogeshktm profile image
yogeshwaran

Simple and clean explanation. Thanks for this.

We are using BEM in our team. yes of course with these mistakes :) will correct these

Collapse
 
malteriechmann profile image
Malte Riechmann

Thanks for your feedback.

Collapse
 
andrewstrackbein profile image
andrewStrackbein

I didn't know the grandchildren one, thanks!

Collapse
 
malteriechmann profile image
Malte Riechmann

Awesome. You are welcome.

Collapse
 
ratrateroo profile image
ratrateroo

I've been using BEM for my home projects, I even tried to combine multiple conflicting resouces. Starting early in BEM after learning CSS is really helpful in improving your wider point of view of the project. Thank you for the tips🙂

Collapse
 
malteriechmann profile image
Malte Riechmann

Thanks for your feedback :)

Collapse
 
felixhtoo30 profile image
Felix H.

I usually make mistakes 2, 3, 4 except 1.
Though there are just 4 mistakes, they're precious.
Thank u for your sharing.

Collapse
 
malteriechmann profile image
Malte Riechmann

Mistakes are part of the learning process. Keep on and happy coding :)

Collapse
 
dnun3s profile image
Luis Nunes

Very interesting...
who never made a couple of those mistakes?
I still do... :)

tx

Collapse
 
malteriechmann profile image
Malte Riechmann

Thanks for commenting. Everyone makes mistakes.

Collapse
 
dippas profile image
dippas • Edited

this tips are all correct and when using BEM with SCSS all of this will make sense. ;)

Collapse
 
malteriechmann profile image
Malte Riechmann

Thanks for your comment. I agree with you. In addition I think, BEM makes also sense with PostCSS, Less or Vanilla CSS.

Collapse
 
a1iraxa profile image
Ali Raza

Tip for the great-grandchildren 👍

Collapse
 
malteriechmann profile image
Malte Riechmann

Thanks for your feedback :)

Collapse
 
topolanekmartin profile image
Martin Topolanek

I always did mistake number 2 which leads to messy structure, so thanks for clarification!

Collapse
 
malteriechmann profile image
Malte Riechmann

No one wants messy structure. Glad it helps. Have fun writing proper BEM.

Collapse
 
malteriechmann profile image
Malte Riechmann

Thank you :)