4

We are building a large site which requires very modular CSS. The problem we have is that we like using the @import statement as it's very clean, but the major downside is the performance (all CSS files referenced are loaded synchronously i.e. not in parallel).

Does anyone know of a way to use PHP (or even .htaccess) to find any CSS files referenced via @import and then generate a single CSS file?

I've looked at loads of examples (some of which are seen here): http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/ but none of them work with @import.

Thanks.

Improve this question
5
  • You might consider minification as an alternative to the @import. It wouldn't be too difficult to whip up something that scanned the CSS files and did the concatenation for you as a part of a build process or something (then minified it). Commented Mar 8, 2012 at 13:11
  • 3
    Personally, I think you're better off using something like minify. code.google.com/p/minify Commented Mar 8, 2012 at 13:12
  • I think your big hang up is that you want to be able to pull in one sheet, and have them pull in others, right? With the minify stuff, you just send all the sheets to the parser and it spits out ONE file. If you have @import within each file, they'll still load the same way. Instead of relying on the sheets to pull each other in, just pass all the separate sheets to the minify parser. Commented Mar 8, 2012 at 14:10
  • I've marked @pomeh as the correct answer as it's the best solution I have so far. But just to be clear (in case anyone else does have a better solution) is that we didn't want to be reliant on a pre-processor such as sass or less as there is no guarantee they will be around in the future where as building something using PHP is much more future proof (in our minds), also it means we don't have to use less/sass for just compiling import statements (as we don't believe pre-processors are a good fit for us and the code it generates). Commented Mar 9, 2012 at 9:21
  • It's a total style pref as we could just have multiple <link>'s in the page and let the Google modpagespeed module concatenate and cache the links into one for us (which is what we do currently). But from a development point of view having one link in the page and using different @import statements looks and feels so much more cleaner. I personally can't think of any efficient way PHP could read a <link> file and then pull out the imported css files - but would still be interested to know if someone had tried it Commented Mar 9, 2012 at 9:23

4 Answers 4

Reset to default
1

Less can do that: http://lesscss.org/#-importing

Maybe sass also, but I'm not sure

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Does less load the imports async?
what do you mean ? I don't get it
It does. You can find it in the source code: "// Import a file asynchronously" followed by the importing function, which has a callback as expected.
It doesn't import synchronously or asynchronously, it concatenates the files into one and then you load that file into your page synchronously..
0

Using assetic to manage CSS and JavaScript does miracles. It is proposed by default when using Symfony2, but can be used as a standalone library in PHP. If used correctly, it will let you use your files in their original format while debugging and concatenate/minify everything in production.

https://github.com/kriswallsmith/assetic

I have not had any issues with @import.

It will also let you use those alternative CSS languages if that is something you are into.

Improve this answer

Comments

0

use compass. it compiles all of your styles into one file.

compass-style.org

Improve this answer

Comments

0

You could use the PHP version of LESS. It will process the styles in a style file and those imported, into one file within the server itself. You can minimize it too. Then store it in a cache. This will enable the LessPHP compiler to see if the processed file is already in the cache, and whether any of the involved style files have been changed. If nothing has changed, it will simply return the cached style file. The only difference you will need to do in the markup will be to change .css to .less in the <link> tag. Also this will help you to write LESS css, which is a bonus.

The detailed documentation on how to do install LessPHP, auto-compile and cache the LESS files are given in the official website and on GITHub.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.