How bad is it in practice to over-nest selectors in SASS/SCSS?

Question

I have a .scss file that, among other things contains this:

nav {
  font-size: 0;
  ul {
    margin: $padding/3;
  }
  li {
    z-index: 10;
    position: re         


        

Answer 1

Just to chime in and enforce what others have said. It's a bad practice not necessarily from a performance point of view (It's probable you'll get better paint time increases from removing blurs/shadows and rounded corners than optimising selectors) but from a maintainability point of view.

The more heavily nested a selector, the more specific the resultant CSS rule (which you know already). Therefore, when you want to 'trump' that rule at some point you'll have to write a rule of equal (or greater) specificity further down the cascade to overrule the first. If you have an ID in there, that's going to make it FAR more specific too (so avoid unless you need them and know you won't need to override down the line).

To follow this to its logical conclusion, don't nest unless you need to. Don't have a rule like this:

.selector .another .yeah-another {}

When this would do the same job:

.yeah-another {}

It just makes life easier for everyone (including you) down the line.