DEV Community

Discussion on: What is BEM in CSS?

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
 
whitep4nth3r profile image
Salma Alam-Naylor • Edited

I would usually do this:

.block_elementOne > .block_elementOneHead

However, as usual with web dev, it depends.

If .elementOne could exist as its own ‘block’, then what you have suggested is fine. However, if it’s an intrinsic element of ‘.block’ and shouldn’t exist outside of ‘.block’, then with this system, it should always be prefixed with ‘.block__’.

As people have suggested, class names can get incredibly long with BEM. However there are always trade offs in any system. As the article states – pick a system and make it work for you. ☺️

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 !

Thread Thread
 
whitep4nth3r profile image
Salma Alam-Naylor

Happy to help! ☺️