CSS合并器出现问题？

Question

I am working with a custom framework.

When I design my sites I split the CSS rules into several files eg

• typography.css
• links.css
• master.css
• tables.css
• etc

Now the obvious issue with this is that it means several http requests.

As I mentioned I am working with a custom framework.
In this framework to include a css file you simply call

echo load::css('name');  
echo load::css('another');

which will spit out

<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">

Now what I am thinking of doing is calling

load::css('name');
echo load::css('another');

as you can see i only call echo on the last one, this will output

<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">

0df4899f90fe7be26f4893b1a4a30eb6 == 'name another'

So basically,

when you call load:css('something') it will store the name in an array, it will return the link tag with the value of md5(implode(' ', $cssArray)) at the end of the php scripts processing it will then actually create the combined file with the md5'd name (if it does not exist).

This means that only one request is made to the server for all the css content.

Can anyone see any potential issues with this approach?
I am also planning on implementing this for javascript files.
Could I run into any problems if I was to also implement a css/js compressor?

---

Google Minify?
After doing some research I have come across google minify.

Would it be possible to alter this so that you can just give it an array of css file paths and have it spit the contents out so that I could call something like

$css = minify::css($cssArray) Then do what I want with the minified contents?

One of the useful things I saw is the ability for it to rewrite paths?

Answer 1

Well, it might depend on how you are combining the stylesheets. I'm not sure how your framework combines the CSS files (by name, by folder, or manually), but browsers (I dunno about IE) interpret every single line literally, even if it is redundant:

#foo
{
  color: red;
  color: green;
  color: blue; /* This one will be the actual color of #foo */
}

All of these are executed, so the last one to be interpreted is the one rendered. If you re-define styles within different stylesheets (I usually use globals.css , header.css , and body.css ), the last one will take effect, which might make your site look funky.

I think this same concept applies to JavaScript, but I haven't encountered function re-definitions yet.