DEV Community

BEM Modifiers in Pure CSS Nesting

Vladyslav Zubko on June 17, 2024

When I was starting to learn web development, pure CSS often remained in the realm of theory. When it came to practice, especially working on real ...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

At this point, what's the point of using BEM in the first place? Why not just do .tag-list__tag.github?

Also, have you considered modifies being prefixes of one another? In that case, .tag-list__tag--github would also match a rule like [class*="--git"] if you happen to have both of those, so you'd have to make sure no modifier is a prefix of another.

Collapse
 
schmoris profile image
Boris

@darkwiiplayer

At this point, what's the point of using BEM in the first place? Why not just do .tag-list__tag.github?

The only downside that comes to my mind is, if someone else in a big project adds something like a global .github { border: 1px solid red; } which then will also be applied to <div class="tag-list__tag github"></div>, whereas with the author's approach thing would stay isolated.

Collapse
 
what1s1ove profile image
Vladyslav Zubko

I would say not with the author's approach, but with the BEM's approach 😁

Collapse
 
what1s1ove profile image
Vladyslav Zubko • Edited

Hey @darkwiiplayer !

At this point, what's the point of using BEM in the first place? Why not just do .tag-list__tag.github

You are right, that option is also possible. But for me personally, that wouldn't be BEM modifiers. Plus, in that case, "github" would be considered as a BEM block, which I don't really like.

Also, have you considered modifiers being prefixes of one another? In that case, .tag-list__tag--github would also match a rule like [class*="--git"] if you happen to have both of those, so you'd have to make sure no modifier is a prefix of another.

There are other substring matching selectors. For example, ^ (the end of attribute value) can be used like [class^="--git"] and [class^="--github"], and everything will work. I have shared snippets from my project and I am totally happy with it. However, I do share your concern that this is not a very safe option compared to using preprocessors.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Ideally, CSS would have a selector that combines [attr~=value] and [attr$=value] where you could write [attr~$=value] to match any element where attr is a space-separated list of keywords and one of them ends with value.

That way one could just check [class~$="--modifier"] in a relatively safe way. At that point, the only problem would be .foo-list__foo--test and .bar-list__bar--test would both match the --test selector, but that's probably a good bit less likely.

Collapse
 
latobibor profile image
András Tóth

I've got confused with a thing here when you wrote "would be considered as a block". Maybe I misunderstood something here, but I understand this .tag-list__tag.github to look like this in HTML:
<div class="tag-list__tag github" />

Then I don't see how this would result in a new block (or maybe in the css file? 🤔). I think I get something wrong here.

Thread Thread
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I think what they mean is that in BEM notation, a single class would correspond to a block.

Think of a class like github__element--modifier, where github is the block part; so on its own, github is just the surrounding block level item without any modifiers. I don't use BEM so I might be misunderstanding some of the nuance here.

Thread Thread
 
what1s1ove profile image
Vladyslav Zubko

Hey @latobibor !

Thank you for your comment. Indeed, without context, it's hard to understand which block I meant. I have revised the comment a bit, and @darkwiiplayer has described everything correctly as well, thank you!

Overall, BEM is primarily about conventions, and nothing stops you from adapting them to the needs of your project. Personally, in this project where I used this approach, each BEM block is in a different CSS file. If I were to use github as a separate BEM block, I would need to put it in a separate file as well, which I don't like.

Thread Thread
 
latobibor profile image
András Tóth

Thank you everyone for the explanation! Once they pointed out "B" is standing for block I understood it immediately.
I also didn't get it as I'm more pragmatic about it; I can tolerate some files containing other things as long as the file is small and no one is reusing the code in it.

Thread Thread
 
what1s1ove profile image
Vladyslav Zubko

It's not so much about tolerating it, but more about the fact that it violates the BEM rules, which state that styles of one block should not be present in the files of another block.

Collapse
 
lizaveis profile image
Yelyzaveta Veis

Great article 🙌 Thanks for sharing it

Collapse
 
what1s1ove profile image
Vladyslav Zubko

Hey @lizaveis ! Thank you! Use it with pleasure!

Collapse
 
mitevskasar profile image
Sara

That's a great approach! I'll be using this from now on 😄

Collapse
 
what1s1ove profile image
Vladyslav Zubko

Hey @mitevskasar ! Thank you! I really like it too! When I found it, I wanted to share it because I was looking for something similar, but I couldn’t find any information. Use it with pleasure! ❤️

Collapse
 
peter-fencer profile image
Peter Vivo

Tailwind are free up form CSS name declaration slavery.

Collapse
 
what1s1ove profile image
Vladyslav Zubko

Hey @peter-fencer !
But it also frees up from other features available in CSS. Although I am not a fan of atomic (class-based) CSS technologies. Here, I cannot support or oppose you 🥲

Collapse
 
peter-fencer profile image
Peter Vivo

Very rare case to found where Tailwind is not able to solve CSS problem. Even I can use slice-9-grid image scaling with them. Maybe some animation is the pure CSS is better.

But for dark/light them switching and overall layout is 2 important area where TW is truly shining.

Thread Thread
 
what1s1ove profile image
Vladyslav Zubko

Yes, you are right, dark/light theme switching is one example. Most of the CSS standards being developed now are not for atomic CSS. However, we'll see, if the Tailwind team will find a way to use the new things in CSS!