- This topic is empty.
-
AuthorPosts
-
December 17, 2013 at 2:38 pm #158545
magicspon
ParticipantHello…
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>
December 17, 2013 at 5:53 pm #158557__
ParticipantI’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
ornav_itemized
.There are no media queries in the code you posted…?
December 18, 2013 at 3:51 am #158577CrocoDillon
ParticipantYou 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.December 18, 2013 at 3:57 am #158580magicspon
ParticipantHello
@traq
The media queries are wrapped around the import. (see http://nicolasgallagher.com/mobile-first-css-sass-and-ie/)How does class^=“chuff” differ from class*=“chuff”
Cheers
December 18, 2013 at 4:01 am #158582magicspon
ParticipantYup…
[class*="nav__item--"]
is what I would usually useDecember 18, 2013 at 6:49 am #158603CrocoDillon
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.December 18, 2013 at 10:15 am #158620__
ParticipantYeah, I wish there was away to match “starts with” against each individual class name. I’ve found myself doing
[class^="foo-"],[class*=" foo-"]
before.December 18, 2013 at 3:01 pm #158650CrocoDillon
ParticipantSmart, 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
. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.