Does it really saves a lot of time to have nested rules in CSS? (using HAML or LESS)
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开发者_C百科 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?
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.
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.
精彩评论