3

I used some tools to validate my css for improving performance and i got feedback asking me to remove overqualified elements.

It does makes sense as it can improve selector performance, but was surprised to see this one as overqualified:

"div#container is overqualified, just use #container"

Does this really matter? I have lot of such occurrences in my css and was skeptical if this can do any good for improving performance.

  • Of course it does...for one thing it makes your CSS file smaller. – Paulie_D Apr 26 '16 at 21:31
  • The default answer to any performance question is "measure it". You're wasting more time worrying about the theory than actually getting anything done. – BoltClock Apr 27 '16 at 05:43
  • In general, I find the claim that overqualified selectors cause a performance issue a bit dubious. But, `#container` should be unique.. do you have other tags sharing the same ID? The "div" is completely superfluous. Additionally, what if you change the markup from `div` to `span`, etc? – Brad Kent Dec 02 '16 at 20:18

1 Answers1

3

There are multiple performance metrics to consider, but at the very least it improves the network bandwidth and speed performance by sending 3 less characters across the wire. admittedly pretty negligible, but could add up if standard across all selectors.

Jeff Puckett
  • 37,464
  • 17
  • 118
  • 167