1

I wondered whether or not a 'narrow' definition such as

#mytable tbody span.myclass
{
     color: #ffffff;
}

is better/faster to parse than just

.myclass
{
     color: #ffffff;
}

I read somewhere that narrow definitions supposedly actually have some kind of adversery effect on CSS speed, but I can't remember where and it's been a while already so I just wanted to clarify if it matters or not, and if it does, which solution is better/faster.

Thank you!

deceze
  • 510,633
  • 85
  • 743
  • 889
Alex
  • 75,813
  • 86
  • 255
  • 348

3 Answers3

2

Google's Page Speed has some information regarding using efficient CSS selectors. I suggest starting there.

So (very) basically, they recommend to:

Avoid using descendant selectors, especially those that specify redundant ancestors

So your second option is the fastest.

Jason Berry
  • 2,469
  • 1
  • 17
  • 21
2

I would opt for the former snippet and not worry about any efficiency whatsoever; unless you have a dozen or so stylesheets CSS won't be a bottleneck. The former snippet is more readable and you know exactly what you're styling, and where it belongs structurally, so when you jump back to make edits you know what to search for.

Then again if you're making global styles like a class to contain floats it would be better to keep it simple.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • +1: Agreed completely. The end user won't notice such tiny optimizations in the short form, but the long form will likely be much easier to maintain. – Benny Jobigan Apr 10 '10 at 07:12
0

"Speed optimization" really shouldn't be of any concern with CSS. The difference in any modern browser is marginal, but the difference in usage is not. You should decide when to use "narrow" or "broad" selectors based on what you want to achieve, how far you want styles to cascade, where you want them to be applicable and if you need to override a broader selector.

deceze
  • 510,633
  • 85
  • 743
  • 889