DEV Community

Common mistakes when writing CSS with BEM

Malte Riechmann on October 22, 2021

Software development is a team effort When doing software development it is essential to agree on guidelines, technology, and methodolog...
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 :)