@include and nested css files

Working on some theme stuff, <link> or @include both work fine from the php files (default, header etc.).
href="<?php echo $this->getStyleSheet('mystyle.css')?>"
type="text/css" />

But the paths get confused with nested css files, where one css gives an @include for another css (which may then @include a further css).
In the long run, just flattening the whole lot into one optimised file is the obvious solution, but during development I would like the flexibility of structure so I can switch fragments in and out.
I can't be the first to run into this. Is there a solution I am missing? How do others solve it?

View Replies: View Best Answer
jshannon replied on at Permalink Reply
I haven't experienced this, but typically things included from one CSS file are relative to that file (and you can doublecheck by looking at something like firebug to see what's giving you a 404).

As such, assuming included.css is in the same directory as mystyle.css, you should be able to simply @include it.

JohntheFish replied on at Permalink Reply
Looking at the network happenings under chrome developer tools the first css (from the php) is imported, but from that further nested @imports seem to be resolved to paths relative to the themes folder, not the theme or the already included css. Boiling it down, what I am getting is...

header.php links
/themes/my_theme/css/mystyle.css (all OK)
mystyle.css imports:
@import url(my_nested_included_style.css);

Which gets resolved to:
/themes/my_nested_included_style.css (Wrong)
But it should have been:

(PS, just noticed my typo, should have read @import in the first post. It is just the post that I wrote @inlcude, not the css code, which correctly uses @import)
TheRealSean replied on at Permalink Best Answer Reply
You imports go to the root of your theme folder, so you would need @import('my_theme/css/custom.css');

Though I have just moved away from imports as they restrict your page load time as each call is sequential, and not parallel.

This is googles stance on it

That bit there was enough for me to use only two files now, my main, and typography

I just make my main longer and copy in my css from others even during development, code commenting out the bits I don't need.

I now also use the css for blocks during development to test out things using custom templates.
JohntheFish replied on at Permalink Reply
I hadn't seen the google text (thanks for the link, it has some ideas I hadn't seen before), but had gathered the same about nested @import from Steve Sounders http://www.stevesouders.com/blog/2009/04/09/dont-use-import/... and his books (faster web sites, even faster web sites)

As I first noted, in the long term, an optimised and flattened file is what I intend to use (unless output optimisers become good enough to do all that for me globally on the fly and I can be lazy). Its just that nested @imports are convenient during development when I want to switch various css fragments in and out.

Additionally, I am experimenting with using css frameworks and unfortunately they use relative @imports which are now broken. I was hoping for a way to fix that without having to hack the @imports inside the frameworks.
TheRealSean replied on at Permalink Reply
When I used to use imports I got into the habit of sticking them in the theme root, not quite as clean or tidy but it worked.

I have never looked at css frameworks before do they offer much extra? are they the grid layouts?
JohntheFish replied on at Permalink Reply
I see what you mean. Just putting the css at the top of themes may be untidy, but during development it won't matter too much and I can then move it back when I tidy up when I flatten it all later.

I have been using yui-2 in the past, then thought of using yui-3, but am now experimenting with yaml. My next stop will probably be ez-css, though I have never used that before. (I like the option of flexible layouts rather than being tied to a grid. I also like source ordering with main content first).

There is a yaml based free theme in the marketplace, but it has made some decisions I would prefer to do differently, so I decided to start from square 1.