LESS - Nesting generates bad CSS code? [closed]

Question

In the following article I read that one should try reduce the number of selecetors.

Article: use less selectors

I'm wondering if writing LESS and I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?

LESS

.wrap{
   width: 100%;
   height: 20%;
   background: green;
   header{
           background: blue;
           h1{
                color: red;
             }
         }
 }

Answer 1

I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?

In a word, yes. In the long run this will give you highly specific, unmaintainable CSS. Let 's have a look at what your example will produce for the h1 style.

.wrap header h1{ color: red; }

So what you've ended up with here is a very specific CSS selector, that isn't really necessary. You could, for instance, just have

h1 { color: red; }

or use a class on the h1

.title { color: red; }

Why is specificity bad?

So imagine, 6 months later another developer comes along and they need to change the color of a h1, but just one of them.

First they try to add a class to the h1

.new-color { color: blue; }

But the colour doesn't change because the original CSS is so specific. So they have to do this

.wrap header h1.new-color { color: blue }

or worse still they may do this

.new-color { color: blue!important; }

And then what happens when other changes need to be made? As you can see very quickly and very easily you can end up with unmaintainable CSS, that will have everyone pulling their hair out.

Performance

People usually negate performance when it comes to CSS, but it is always good to know what is going on when a page is rendered. CSS is read from right to left. Using your example

.wrap header h1 { color: red; }

This means the browser engine will search for every h1 and check if they have a parent header and then if that has a parent class wrap. If so it will apply the style. A low specificity makes the rendering process a lot simpler.

Summary

So to sum it up, nesting, whilst it may seem great keeping your code nice and readable, should only be used when absolutely necessary. It's very easy to forget what the CSS that is actually being produced looks like. Before you know it you'll be in nesting hell.