multiple CSS files or just one?

[Makaveli2007]

I've read a book about CSS in which the author basically says using different style-sheets and also using the import method for it can help get a clearer structure, etc.

Right now I'm looking at the code of different premade templates trying to understand it. What I realize is that: The more CSS files people are using the harder I find it to understand what's going on.

I might be wrong and it might just be personal preference, but to me it seems as if I'd (normally) have the leanest code and the easiest to understand if I only used 1 file for the html and 1 file for the CSS.

How do you feel about this? Do you use one or multiple stylesheets?

[lavazza]

The main reason (for me) of having more than one is to accommodate different media

www.w3.org : Media types [w3.org]

7.1 Introduction to media types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media (e.g., the 'cue-before' property for aural user agents). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. However, the two media are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Experience also shows that sans-serif fonts are easier to read on screen, while fonts with serifs are easier to read on paper. For these reasons, it is necessary to express that a style sheet -- or a section of a style sheet -- applies to certain media types.

7.2 Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets: ...

Start with one (media="all") and, when you feel confident/ have the time and/or the inclination / etc., create more

Google Results 1 - 10 of about 60,900 for css media="print" [google.com]

[JAB Creations]

If you to divide your CSS in to multiple files do so only at the server. Are you using PHP? Use an HTTP get query and combine it with PHP to call only the file chunks you wish to use...

(X)HTML

<link href="style.css.php?media=screen1&#38;media=screen3" media="screen" rel="stylesheet" type="text/css" />

PHP

<?php
//start compression
ob_start("ob_gzhandler");
if ($_GET['media'] == "screen1") {include("screen1.css");}
if ($_GET['media'] == "screen2") {include("screen2.css");}
if ($_GET['media'] == "screen3") {include("screen3.css");}

//end compression
ob_end_flush();
?>

Using that code will only require you to modify the HTTP queries but not require multiple links to multiple stylesheets. Since they are different URLS they should cache each "set" of combined stylesheets separately. Lastly it will compress the CSS served to the client and it's minimal code in your (X)HTML.

- John

[Makaveli2007]

thanks for the input. I'm currently not using any PHP code, but will most likely do so in the future, so thanks for sharing this.

It seems as if you agreed that using 1 CSS-file should be enough when it can be done and that using multiple CSS-files is only of benefit if you have diff. versions for diff. media, etc.?

[JAB Creations]

The media attribute defines what medium the CSS will be used for. media="screen" will be used on your CRT/LCD and media="print" will use a stylesheet specifically for printing only.

An important note: when you use multiple stylesheets for some reason you're not allowed to set a title for the main stylesheet. I don't know why but you're not which makes little sense. When you combine multiple stylesheets via multiple link elements such as what I do at my site you must use the exact same title for all CSS files you'll use, otherwise they won't be included and it does funky stuff.

- John