Efficient CSS with child selectors, is it worth it?

Question

I know:

div > p

is faster to render than

div p

but, in the other hand, it occupies one more character, so it increase the time to send the CSS file.

I know the speed difference is very little, but if you have a very large CSS file with a lot of selectors it can start being important.

So, my question is: what is better, to lose some time rendering and do not use child selectors or use child selectors and lose some more time sending the CSS file?

Until you actually measure it and demonstrate that it is a noticeable hindrance to the user, why bother? — Diodeus - James MacFarlane, Nov 17 '11 at 20:02
"if you have a very large CSS file with a lot of selectors it can start being important" Only for IE. — BoltClock, Nov 17 '11 at 20:48
If you are this worried about bytes (I mean they're just a few **bytes**; as no-brainer as it sounds it takes **a thousand requests** of an extra byte to reach a single **kilo** byte), realize that `div>p` works just as well. No extra space characters. — BoltClock, Nov 17 '11 at 20:49

score 2 · Answer 1 · answered Nov 17 '11 at 20:02

2

Div > p and div p are not the same

if you have the following structure:

<div>
  <p id="p1">first p</p>
  <section>
     <p id="p2">second p</p>
  </section>
</div>

div > p will apply to only p1, while div p to both p1 and p2.

The speed of the selectors will depend on your html structure.

answered Nov 17 '11 at 20:02

Emil

8,449
3
27
44

1

But it is very important to consider. It's not fair to base something solely on performance if comparing two totally different things. – BoltClock Nov 17 '11 at 20:51
it's true but in some cases both do the same. then, you have to use one of them. – Aljullu Nov 17 '11 at 20:55
1

Then just pick one and move on. – BoltClock Nov 18 '11 at 05:51

score 1 · Answer 2 · edited Nov 18 '11 at 04:45

1

You should distinguish between loading the data from the server and parse the HTML+CSS.

at loading time you right (it will be slower)

but on render you are wrong (it will be faster)

P.S. don't forget: once you have the CSS - it won't be downloaded again.

edited Nov 18 '11 at 04:45

Samuel Liew

76,741
107
159
260

answered Nov 17 '11 at 20:01

Royi Namir

144,742
138
468
792

ok. I hadn't thought about the cache. so, maybe it's better to use efficient CSS selectors despite it slows a bit the download. – Aljullu Nov 17 '11 at 20:53

Efficient CSS with child selectors, is it worth it?

2 Answers2