Does it really saves a lot of time to have nested rules in CSS? (using HAML or LESS)

Question

Currently, this is how I'm coding my CSS:

Normal CSS:

#content { color: white; background: black; }  
#content a { color: yellow; }  
#content p { margin: 0; }  
#content (etc...)  
#contnet (etc...)  
#content (etc...)  

(I always include the parent even if its not necessary so I can orient myself within the stylesheet)

This is how it would be done in SCSS or LESS:

#content {  
  color: white;  
  background: black;  
    a { color: yellow; }  
    p { margin: 0em; }  
    (etc....)  
    (etc....)  
    (etc....)  
}  

What are some of the pro and cons of having nesting rules in CSS?

Answer 1

The short answer is: clarity.

It's much easier to read the second item. Also, it tends to force you to put all of your #banner related styles in one location instead of scattered throughout the sheet.

Does it save time? I guess that depends on your work habits. It might.

Answer 2

Well this is really simpler to maintain. Let's say you are scoping a huge CSS:

#content el1{}
#content el2{}
#content el3{}
...
#content el999{}

... and tomorrow #content changes to #something-else. Instead of changing 999 entries, you'd change only one!

#content{
  el1{}
  ...
  el999{}
}

Also it's easier to read and kind of force you to use nesting.

I only see positive things using solutions like less or scss. So I guess that it will save you some time in the long run, but the main advantage is that it will produce a cleaner, DRYer code.