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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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--githubwould 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.@darkwiiplayer
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.I would say not with the author's approach, but with the BEM's approach 😁
Hey @darkwiiplayer !
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.
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.Ideally, CSS would have a selector that combines
[attr~=value]and[attr$=value]where you could write[attr~$=value]to match any element whereattris a space-separated list of keywords and one of them ends withvalue.That way one could just check
[class~$="--modifier"]in a relatively safe way. At that point, the only problem would be.foo-list__foo--testand.bar-list__bar--testwould both match the--testselector, but that's probably a good bit less likely.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.githubto 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
cssfile? 🤔). I think I get something wrong here.Great article 🙌 Thanks for sharing it
Hey @lizaveis ! Thank you! Use it with pleasure!
That's a great approach! I'll be using this from now on 😄
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! ❤️
Tailwind are free up form CSS name declaration slavery.
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 🥲
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.
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!