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

[magicspon]

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>

[__]

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…?

[CrocoDillon]

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.

[magicspon]

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

[magicspon]

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

[CrocoDillon]

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

[__]

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.

[CrocoDillon]

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.

[Author]

Posts