Reduce CSS files

[Greg]

I have reduced my CSS down to one file thanks to the information from here. Great idea, putting an id tag on the body element then using the Cascading effect of CSS for each page you want different.

Example: I put an id="blue" in the body tag of one of my templates and an id="green" in another template, then added this to my common css file.

(sample only)

Code: Select all

#blue #container {
	background-color: #036;
}
#blue #leftnav {
	background-color: #76A3CB;
	border: 1px solid #111;
}
#blue #mcontent {
	border: medium double #534137;
	background-color: #AEC6DE;
}
#blue #footer {
	background-image: url(images/barb.jpg);
	color: #FFE4C4;
}



#green #container {
	background-color: #8FBC8F;
	background-image: url(images/grnstone.jpg);
}
#green #leftnav {
	background-color: #99B49C;
	border: 1px solid #111;
}
#green #mcontent {
	border: medium double #534137;
	background-color: #C4D9C4;
}
#green #footer {
	background-image: url(images/barg.jpg);
	color: #FFE4C4;
}

[rgbernha]

Except that now when someone looks at your "blue" template, they're downloading the "green" template CSS as well, even if it isn't used.

For small CSS files, this is fine, but once you start getting complicated structures and specialized formatting, it'll use up a lot of extra (unneccessary) bandwidth. The same goes for external JavaScript files. Just something to keep in the back of your mind once 1,000+ people are visiting your site per day...=o)