How would you BEM this?
ChatGPT is showing me:
But that doesn't look right to me. I suck at BEM but I always thought that
- denoted the modifier.
I thought it should be something like this maybe?
7 Replies
I asked chatGPT the same and got this which I would say looks closer:
I don't use BEM so am unsure whether the title class name is correct
That said, chatGPT is just basing the name on what we are giving it. I agree that
application-header__innerwould be better than application-header__inner-container .
... just checked with the documentation and it states that
block structure should be flattened; you do not need to reflect nested DOM structure of the blockSo I think that, in my test, chatGPT got it right for the title element
It's very hard to give good BEM advice without more context.
Not everything needs to be a element when it's nested... so like, if the title is the same as titles that are outside of that element, then just use whatever class you'd use there.
Same for inner-container. If it's a common pattern, you can re-use it.
Most common example for this is a
.button. If you have a button in your application header, you probably don't want to bother with .application-header__button
If you do want to be very strict, though, I'd go with
- .application-header
- .application-header__inner-container (or just __inner)
- .application-header__titleThanks guys! Yea unfortunately the markup is a mess and it's got to be very specific, so I wanted to bring some structure to the class names hence why I'm using BEM. For
.application-header__inner-container, I always thought -container was the modifier part? So in that example, if we had to add a modifer to .application-header__inner-container, how would we add it?Modifiers are after a double hyphen
-- single hyphens are for separating wordsOhhh right 😅 I knew that, not sure what I was smoking this afternoon 😂 Okay makes sense, good to know you can write BEM names like this, thanks guys!
use BEM with caution. It's pretty rare that you need the high specificity it provides, most of the time you can just do
.app .container instead of .application__container and it's even worse when you write it in SCSS like you've shown because it compiles to .application .application_container which is like 3 times as long as you need it to be for no gain, you find yourself quickly with CSS files that are 30 or 40% selectors instead of actual usefull stuffThat's a good point maybe I don't need it to be that specific, I just wanted some structure to my components since I can't edit the html but I guess I can just add wrappers (in the drag and drop thingy 😭) and just give them a class name and target with
.app .container like you said