Do additional, unused CSS definitions slow down browsers?

After working with many CMSes and cutting up many HTML designs, when I saw SilverStripe's use of CSS, I was converted.

Essentially, that it would be a waste to change IDs in <div> tags depending upon the page you were on, and that changing the <body> tag's classes and ID would be an easier way of changing specific pages.

Such convictions were brought into question by a coworker during the following problem:

On a specific website, we have a variety of pages that are similar in structure. Some may include a special form, and some may not. All special forms should have a different background image depending upon the sub-section we are in.

Due to a claim that "additional lines of CSS slow down body.onLoads," my argument to code all background expectations in the CSS was rejected.

Can anybody cite evidence between a variety of cases? Cases including: Badly-coded CSS, and CSS well-coded, but having a variety of unused CSS on each page?

(And specifically speaking on my problem, can anybody explain my unease? I feel uncomfortable assuming images will be there and auto-generating Inline CSS (or header-section-based style tags) based upon a variable from a database.)

It's not going to matter (noticeably) unless your website is Gmail or YouTube (or is similarly CSS heavy).

Google has some recommendations in their Page Speed guide:

http://code.google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.

Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk. In addition, once the stylesheet is loaded, the browser's CSS engine has to evaluate every rule contained in the file to see if the rule applies to the current page. Often, many web sites reuse the same external CSS file for all of their pages, even if many of the rules defined in it don't apply to the current page.

The best way to minimize the latency caused by stylesheet loading and rendering time is to cut down on the CSS footprint; an obvious way to do this is to remove or defer CSS rules that aren't actually used by the current page.

Concerning this:

Due to a claim that "additional lines of CSS slow down body.onLoads," my argument to code all background expectations in the CSS was rejected.

The extra time is in the order of a few milliseconds. Do what is easier and maintainable, not what is more "efficient".

Recommended topics

Hot tags