views:

110

answers:

1

From my interpretation, google recommends targeting HTML elements via id performs better than targeting purely by hierachy, but when filesize is added into this equation, how do the priorities end up?

Just to be clear, there are three factors here which I wish to discuss the trade-offs between.

  • CSS efficiency
  • CSS filesize
  • HTML filesize
+2  A: 

In general it is probably better to keep HTML filesize smaller, since HTML is mostly dynamic and difficult to cache.

CSS is often static and easily cacheable, so filesize is not so important, if you set your cache headers right. CSS selectors are probably most efficient if the selector expressions are not too complex. I believe id selectors are optimized in many browsers.

If you want to keep your CSS efficient then use a simple visual layout, a few simple CSS selectors and use newer CSS effects minimally.

Here is a good set of general best practices for HTML performance : http://developer.yahoo.com/performance/rules.html

Timo Westkämper
re: "id selectors are optimized in many browsers" - shame most .net projects require avoiding html id's for styling in my experience (they are often set to guid's). That's a good shout about the static/dynamic difference between the two regarding caching.
Dr. Frankenstein
You have only mentioned CSS filesize vs. HTML filesize, what is your opinion on CSS efficiency vs. CSS filesize? Thanks
Dr. Frankenstein