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...
For further actions, you may consider blocking this person and/or reporting abuse
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. ;)
I already have this in my project, good to see you explained it very well here, thank you!
Bem is the next best thing since css itself. I think originally was developed by smart folks at yandex
wow
love this!
Nice post!
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]
Hi, I'm wondering, how do you manage the class name for all children elements ?
is this logic is correct ? :
.block_elementOne > .elementOne_head
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. ☺️
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 !
Happy to help! ☺️
CSS syntax is mostly case-insensitive, I think we should use kebab-case instead camelCase for descriptive class names
It’s all personal preference. As the article states, choose a system and make it work for you.
I mean
AbcaBcabCis sameHmm. Another solution for large css structures like bigger than 1mb.