DEV Community

Cover image for What is BEM in CSS?

What is BEM in CSS?

Salma Alam-Naylor on May 11, 2021

Have you ever worked on an application with one huge CSS file and found that when you changed a style rule in one place, something unexpected happe...
Collapse
 
metalmikester profile image
Michel Renaud

Funny that just yesterday I was reading a (very controversial) post here on dev.to that mentioned BEM and I was wondering, "argh, what's that again?" as I couldn't remember, but I didn't have time/forgot to look it up. And here we go, first thing this morning, this post. :) Thanks. ;)

Collapse
 
drehere profile image
Andrey • Edited

Bem is the next best thing since css itself. I think originally was developed by smart folks at yandex

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav

I already have this in my project, good to see you explained it very well here, thank you!

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

love this!

Collapse
 
dev_emmy profile image
nshimiye_emmy

wow

Collapse
 
owenmelbz profile image
Owen Melbourne • Edited

Ever wondered why your CSS files are 200mb? Ah yes, BEM :P the place where you infinitely add more and more css incase you ever break something as you hate the world of DRY :P [/troll]

Collapse
 
socoladaica profile image
Socola Đại Ca

I mean Abc aBc abC is same

Collapse
 
isabellacacelia profile image
Isabella

Nice post!

Collapse
 
mrsize profile image
Thomas Dufranne

You are right, i think the fact that an element can or not exist by itself is a good point to define the class name.
Alright, thanks Salma for the clarification !

Collapse
 
mrsize profile image
Thomas Dufranne • Edited

Hi, I'm wondering, how do you manage the class name for all children elements ?
is this logic is correct ? :
.block_elementOne > .elementOne_head

Collapse
 
socoladaica profile image
Socola Đại Ca • Edited

CSS syntax is mostly case-insensitive, I think we should use kebab-case instead camelCase for descriptive class names