Home/ Questions/Q 809661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:45:46+00:00

I’ve been always guiding myself with the following CSS structure: #nav { } #nav

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0