After reading about responsive suffixes in http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/#responsive-suffixes I’ve started to think about opting in and out of objects.
Say you have a .tabs object that display each link with an equal width horizontally.
In a smaller viewport you just want to display a simple list vertically. So you might end up using responsive suffixes.
<ul class="c-user-admin o-tabs@desktop">
<li class="o-tabs__item"><a class="-o-tabs__link">...</a></li>
...
</ul>
A problem I see is that if you write your selectors with just one class .o-tabs-link it will be applied in all viewports and can be bothersome to overwrite.
This could be resolved by always first specifying the block element selector (from BEM) before you write the element selector.
.o-tabs {}
.o-tabs o-tabs__item {}
.o-tabs o-tabs__link {}
@media screen and (min-width: 768px) {
.o-tabs\@desktop {}
.o-tabs\@desktop o-tabs__item {}
.o-tabs\@desktop o-tabs__link {}
}
Now all tabs classes will only be applied at the viewport size you want. The specificity increases but might be fine if you write all object & components in the same style.
I’m curious for your thoughts about this.
