LESS - Nesting generates bad CSS code? [closed]

问题

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;
             }
         }
 }

回答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.

回答2:

Languages like LESS or SASS give you more flexibility in declaring your style rules, and that can be good or bad depending on how you use it. The more flexibility you have in a language, the more you need design patterns and good practices to avoid making things worse than they were before.

LESS doesn't require that you always nest. You can always use CSS of course, and if you are applying a style to all p it might be better to define it globally, than to call mixins to obtain the same result on several nested ps.

But LESS and SASS do allow you avoid duplication, to write code that is clearer and easier to maintain, and other problems caused by the code duplication required by CSS.

来源：https://stackoverflow.com/questions/22175299/less-nesting-generates-bad-css-code

标签

css

less