@include and nested css files
Permalink
Working on some theme stuff, <link> or @include both work fine from the php files (default, header etc.).
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?
<link href="<?php echo $this->getStyleSheet('mystyle.css')?>" rel="stylesheet" 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?
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:
/themes/my_theme/css/my_nested_included_style.css
(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)
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:
/themes/my_theme/css/my_nested_included_style.css
(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)
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
http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImpor...
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.
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
http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImpor...
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.
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.
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.
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?
I have never looked at css frameworks before do they offer much extra? are they the grid layouts?
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.
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.
As such, assuming included.css is in the same directory as mystyle.css, you should be able to simply @include it.
James