The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Opt in/out objects with responsive suffixes

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #235804

    After reading about responsive suffixes in 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>

    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.

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.