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/
