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?