1

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

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}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.