ronin - 2:16 pm on Sep 10, 2004 (gmt 0)

Stylesheets containing cascading style rules, may themselves be cascaded.

Some large-scale sites are such that some styles are global, some styles are specific to pages in Section A only and some styles are specific to pages in Section A (subsection 3).

Writing all the style rules in a single CSS document makes the document burdensome - especially if you are accounting for Section A (subsection 1) all the way to Section Z (subsection 10). This slows initial loading times when a visitor first accesses a site.

Alternatively, writing a separate stylesheet for each subsection defeats the object of using external stylesheets in the first place. This negates the advantage of stylesheets being cached in the browser, since the style rules have to be re-parsed on every new page.

In fact, /sectiona/subsection3.html only needs to refer to a single css document:

@import url(/css/a3.css);

Then, the first line of a3.css can be the reference:

@import url(a.css);

and the first line of a.css can be the reference:

@import url(global.css);

The result will be that all the global.css rules will apply first, followed by all the a.css rules and finally the a3.css rules.

A visitor who has already been to other parts of the large-scale site will already have global.css cached in the browser and will only need to parse a.css and a1.css. A visitor who has already navigated between Section A subsections 1 and 2 will have a.css already cached and will only need to parse a3.css.

I use this technique on my site where all the positioning, margin, padding, spacing and general style rules are in the global farm.css stylesheet and all the colour information for each section is contained in the respective pigs.css, chickens.css, ducks.css and sheep.css stylesheets.