stylesheet tag and imports

Question

So I have an include template named '.head' in which I am calling my CSS like so:

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=assets/styles-css}" />

I was referencing the rest of the styles via imports at the top of that file like this:

@import url(//full-path-to-the-next-stylesheet-0.css);
@import url(//full-path-to-the-next-stylesheet-1.css);
@import url(//full-path-to-the-next-stylesheet-2.css);
@import url(//full-path-to-the-next-stylesheet-3.css);
@import url(//full-path-to-the-next-stylesheet-4.css);
@import url(//full-path-to-the-next-stylesheet-5.css);
@import url(//full-path-to-the-next-stylesheet-6.css);

This was fine when this was a static site. However, in EE I was getting mixed results by it 'sometimes' loading the styles and other times not. (Mostly not)

I thought maybe it would be better to just bring them all into EE and let it manage all stylesheets. Now I have this:

/*---------------------------------
IMPORTS
-----------------------------------*/
@import url("{stylesheet='assets/css-0'}");
@import url("{stylesheet='assets/css-1'}");
@import url("{stylesheet='assets/css-2'}");
@import url("{stylesheet='assets/css-3'}");
@import url("{stylesheet='assets/css-4'}");
@import url("{stylesheet='assets/css-5'}");
@import url("{stylesheet='assets/css-6'}");

The problem with that is that I end up having to change the first to {path} rather than {stylesheet} to use the {stylesheet} tag for the @imports.

This also takes FOREVER to load.

Long question now shortened...

What is the best way of handling this? I would like to use the native stylesheet tag for caching reasons.

Thanks in advance.

EE v2.5.5 - Build Date: 20121220

Answer 1

For speed and clarity, I would keep your css files outside of EE and also not use @import. Look into Automin (which I have used) or Minimee (haven't used, but great reviews), which should really speed up and simplify displaying your stylesheets.

For example, with Automin, you would use something like the following in your head (so to speak...):

{exp:automin:css
    attribute:type="text/css"
    attribute:title="default"
    attribute:rel="stylesheet"
    attribute:media="screen, projection"
}
    <link href="/css/core.css" type="text/css" title="default" rel="stylesheet" media="screen, projection">
    <link href="/css/design.css" type="text/css" title="default" rel="stylesheet" media="screen, projection">
{/exp:automin:css}