Nesting

Nesting in Scss

Selector nesting is a feature of CSS preprocessors, allowing authors to nest selectors within selectors in order to create shortcuts. For instance:

.parent { color: red; .child { color: blue; } }

Which would compile to the following CSS:

.parent { color: red; } .parent .child { color: blue; }

What’s wrong with nesting?

In itself, there’s absolutely nothing wrong with nesting. The feature makes sense. The problem, as is often the case, is not the feature but how we use it.

.parent { .child { background: blue; &:hover { background: red; } .tab-link { color: white; @at-root #{selector-replace(&, '.child', '.child:hover')} { color: red; } } } }

in this example you can see that we are now having to add extra lines at the bottom to fix something that we have nested in higher up(highlighted). 

 

Nesting can be useful. 

Nesting was created to help you code and to make things easier, the best practise with nesting is to remember not to start nesting to deeply or you will have to write more code just to fix what you have nested.