Forums

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

Home Forums CSS [class*="item"] selector in place of @extend in SASS media queries

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #158545
    magicspon
    Participant

    Hello…

    I know that this type of selector isn’t the best in terms of performance, but has anyone had experience using this selector in place of extends in SASS media queries

    For example.

    [class*="nav__item"] {
        width: 15%;
        letter-spacing: normal;
    }
    .nav__item--right {
        text-align: right;
    }
    

    instead of

    .nav__item {
        width: 15%;
        letter-spacing: normal;
    }
    .nav__item--right {
        @extend .nav__item;
        text-align: right;
    }
    

    markup

    <ul class="nav">
        <li class="nav__item"><a href="#">Work</a></li>
        <li class="nav__item"><a href="#">Blog</a></li>
        <li class="nav__item--right"><a href="#">About</a></li>
        <li class="nav__item--right"><a href="#">Contact</a></li>
    </ul>
    
    #158557
    __
    Participant

    I’ve never heard anything bad in terms of performance. Browser support is very good, too.

    The only problem you might run into is word boundaries: for example, in your case, the rule will also match classes like not_nav_item or nav_itemized.

    There are no media queries in the code you posted…?

    #158577
    CrocoDillon
    Participant

    You can always use .nav__item, [class^="nav__item--"] to account for the mismatches.

    EDIT: It’s early… that won’t match class="some-class nav__item--mod". So use .nav__item, [class*="nav__item--"] anyway.

    #158580
    magicspon
    Participant

    Hello

    @traq
    The media queries are wrapped around the import. (see http://nicolasgallagher.com/mobile-first-css-sass-and-ie/)

    @CrocoDillon

    How does class^=“chuff” differ from class*=“chuff”

    Cheers

    #158582
    magicspon
    Participant

    Yup… [class*="nav__item--"] is what I would usually use

    #158603
    CrocoDillon
    Participant

    ^= means starts with and *= means contains. The problem with starts with is it takes the whole attribute into account, not just the separate classes.

    #158620
    __
    Participant

    Yeah, I wish there was away to match “starts with” against each individual class name. I’ve found myself doing [class^="foo-"],[class*=" foo-"] before.

    #158650
    CrocoDillon
    Participant

    Smart, so the selector would be:

    .nav__item, [class^="nav__item--"], [class*=" nav__item--"]
    

    I guess it’s worth it if you have a lot of classes that inherit from nav__item.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.