CSS Performance Question

Question

I was wondering what the experts do when it comes to writing CSS code. Is it bad to use the tagname.className style? Does inheritance cause a noticeable performance loss? Do

Answer 1

Be careful. Removing and adding scope for your selectors changes the priority of rules and may lead to unexpected results on your production output.

Minification is overrated. Modern, well-configured webservers will send gzip'ed CSS which will collapse whitespace and repeated words very effectively. The performance gains of a few K per CSS file are not perceptible to humans using anything faster than a 56k modem. By contrast a single 100x100 px JPEG image could easily consume more bandwidth than your CSS and JS files combined.

Combined with caching this largely makes the need to optimise CSS size redundant, or at least far less important than keeping your code maintainable.

As for how it affects rendering speed, i don't know, however I suspect that is largely implementation dependent (browser specific).

Answer 2

Not exactly sure if Galen's answer is 100% correct. There are a couple of nice articles with benchmarks out there with a different conclusion "Performance Impact of CSS Selectors". However in most real world cases you won't notice any difference and therefore the possible benefit is not worth the effort.