I used to use multiple stylesheets for ease of development (and I have to admit, often a lot more than the four you're using), but in recent years, after reading about the impact on page load speed, my approach has changed radically.
If you're using @import, as you will be if you're using one stylesheet to load in another, you're limiting the browser's ability to load stylesheets in parallel: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ So the alternative is to have a lot of <link> statements in the <head>. However, you're still creating an unnecessary number of server requests that'll slow down the perceived page load speed. Yes, there'll be a saving in file size, but it'll have to be a big saving to compensate for the additional requests. If you're using GZIP on CSS files (with the appropriate rules for early IEs), there can be a massive size saving. For example, on the project I've just completed, the CSS file is 24K unzipped, but 5.1K zipped. At this size, splitting the stylesheet into multiple files would be detrimental to overall speed. If you minify your CSS first, you can get the size down even lower: http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/ Take note of the comments about alphabeticising, which the above minifier handles automatically. Having made the case for a single CSS file, I do have sympathy for how unwieldy this can get while developing. One way round this is to stitch multiple files together server-side using PHP, by enabling CSS parsing of CSS files, and pulling the component files from a PHP include directory: css.css <?php header ('Content-type: text/css'); require_once 'inline.css'; require_once 'block.css'; require_once 'template.css'; ?> You'll also need to set cache headers to ensure the browser caches the CSS. I'm sure you could achieve a similar result in a more elegant fashion by running a SVN post-commit hook to minify and stitch together the CSS without having the PHP overhead. Finally, for IE hacks, I use a cascading series of conditional comments: <link rel="stylesheet" type="text/css" media="all" href="/css/css.css" /> <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="/css/ie.css" /><![endif]--> <!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="all" href="/css/ie7.css" /><![endif]--> <!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css" type="text/css" /><![endif]--> <!--[if lt IE 6]><link rel="stylesheet" type="text/css" media="all" href="/css/ie55.css" /><![endif]--> <!--[if lt IE 5.5]><link rel="stylesheet" type="text/css" media="all" href="/css/ie5.css" /><![endif]--> All IEs get ie.css. IE7 and below gets ie7.css, IE6 and below gets ie6.css etc. Yes, earlier versions of IE may have to parse a number of overriding styles, but you may find that you can eliminate some of these lines once your site is completed as some of the IE-specific sheets may be empty. I'm very wary of off-the-shelf CSS reset stylesheets, as I've seen nasty results on form controls that need a lot of hacking to reverse. I just tend to use: * { margin: 0; } body, fieldset, legend, ul, ol, th, td { padding: 0; } fieldset, a img { border-width: 0; } and handle anything else in my main styles. However, this is very much geared around my coding style, so your mileage my vary. <snip> Over the past year or so I have designed and coded about 7 new web site. I am very comfortable with the following pattern for writing CSS: In each web page I link a screen.css file that simply imports three other .css files: reset.css; ie.css; and master.css. The reset.css file is the normal file that resets all margins and padding to zero, sets h1, h2, . . ., and p to 100%, etc. The ie.css file has my ie hacks. The master.css file has the key styles that flow through the site. Each web page has embedded styles. This may be where I depart from the norm. I did one site about a year ago that included all styles in master.css. There were no embedded styles on any page. This drove me nuts!! The style sheet was over 1000 lines of code long. I found it very hard to find the callouts when I needed to find them. Also, when adding styles for a new web page, sometimes I contradicted styles I wanted on other pages and had a hard time diagnosing the problem. Now, using embedded styles on each page for those attributes unique to the page, my master.css is typically 200 or so lines of code. Very manageable. No unintended conflicts. </snip> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/