[thelist] Inline vs. files for conditional IE CSS?

[Bill Moseley]

I'm on a small quest to reduce the number of css files loaded on a
site by removing @import from css files and instead concatenating the
css files by media type and then using YUI compressor to serve them as
single files as much as possible.  (They are gzipped, and have huge
expires times, too.  Plan to move to a CDN at some point as well).

There's also a number of IE conditionals:

    <!--[if IE]>
        <style type="text/css">
            @import "ie.css";
        </style>
    <![endif]-->

In most cases there's an [if IE] and also [if IE 6] and [if IE 7]
and those are typically very small files (with a single rule or two).

This is probably hard to answer, but I'm tempted to inline those
smaller css files instead of loading them with a separate request.

But, that will make the pages slightly larger -- for all requests
instead of just the first page load (which fetches and caches the css
file).

Perhaps this is premature optimization, but I'm curious if there's any
magic size where it makes sense to have the small chunk of css in a
file vs. placing the css inline in the markup.

BTW -- any reason to use @import above instead of <link>?


-- 
Bill Moseley
moseley at hank.org
Sent from my iMutt