Using indentation to make CSS more readable? (making parents and children more identifiable in CSS)

Question

I've been always guiding myself with the following CSS structure:

#nav { }
#nav li { }
#nac li a { }

This structure tells me clearly who is the parent and the child.

But in a recent article (I think it was CSS Trick) someone said that CSS is read from right to left. So the more tags I had the slower it will be (and sometimes I think its unnecessary to write every single tag involve in the selector).

So it may be something like this:

#nav { }
#special-link { }

where #special-link is #nav's child. I know this is not a big problem in a simple stylesheet but in a big one I always would get confused about who is who's parent and child.

Another solution would be:

#nav { }
   #special-link { }

Indentation

How do you solve with this CSS dilemma?

Answer 1

I'd say you're optimising prematurely. I read the same article, and at the end, he states that these guidelines were written over ten years ago, when computers had much less power under the bonnet. Now, I really don't think it matters much—compared to any JavaScript you have running, your CSS will be lightning-fast. Go for the readable option.

One way you can make it faster without sacrificing readability is, as Chris Coyier states, to avoid descendants in favour of children. So instead of #nav li a, use #nav > li > a. This should improve speed and actually conveys more information, not less.

Answer 2

Check out CleverCSS - I found it very readable... but that may be because I'm Python developer. Also, it results in ordinary CSS stylesheet.