Home > Designing, Others > Sass Selector Combining

Sass Selector Combining

October 15th, 2018 Leave a comment Go to comments

Brad Frost was asking about this the other day…

Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO

— Brad Frost (@brad_frost) October 1, 2018

.c-btn {
    &__icon {
        ...
    }
}

I guess that’s technically “nesting” but the selectors come out flat:

.c-button__icon { }

The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad’s post gets into all the pro’s and con’s of both ways.

To me, I’m firmly in the camp of not “nesting” because it makes searching for selectors so much harder. I absolutely live by being able to search my project for fully expanded class names and, ironically, just as Brad was posting that poll, I was stumped by a combined class like this and changed it in one of my own code bases.

Robin Rendle also notes the difficulty in searching as an issue with an example that has clearly gone too far!

Direct Link to ArticlePermalink

The post Sass Selector Combining appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.