I feel obliged to share a gotcha regarding nesting... The idea of nesting in SASS/SCSS is that you need a combination of selectors, and you don't want to repea

I feel obliged to share a gotcha regarding nesting... The idea of nesting in SASS/SCSS is that you need a combination of selectors, and you don't want to repeatedly type out the first one. What I often see though is developers using it as grouping structure, closely mimicking the nesting of the markup they're working with. This is massively convenient from an authoring point of view, but it leads to issues. For complicated components, I've seen output consisting of 12 selectors after each other, whilst only 2 would be needed. Not only does this lead to verbose output, it also makes that style rule extremely specific. In case you ever need to overrule it, you'd need 13 selectors or an !important. To illustrate: .selector1 .selector2 ........all the way up to .selector 12 Or: .selector1 .selector12 Example 2 is what you want. You got your parent scope and after that it doesn't matter where .selector12 is in the markup, assuming you use something like BEM. The 10 nesting levels in between are completely pointless.