Combine multiple css files in one

I know that this Q is posted way way back but since I once had this kind of problem, I thought I can share a link to these two task manager I frequently use when creating templates for Joomla, namely:

• Grunt
• Gulp

A simple grunt task can combine your CSS in an instant (see below example)

...
cssmin: {
    target: {
        files: {
            'css/output.css': [
                'style1.css',
                'style2.css'
            ]
        }
    }
}
...

Cheers!

You can use @import url'file' to include each css file into one then just include the one file in your main page.

e.g. in my site

@import url("nav.css");
@import url("popup.css");
@import url("latestPosts.css");
@import url("home.css");

This code is placed at the top of common.css and then common.css is just included into index.php

Might want to take a look here: http://www.w3.org/TR/CSS21/cascade.html#at-import

Maybe Factor CSS can help you out? Run your combined file through it and see if that makes a difference. But don't disregard the disclaimer, which states that it might not work well when the stylesheet depends on the order of the rules. Such is the nature of Cascading StyleSheets.

A quote on stylesheets from About.com

A stylesheet is intended to cascade through a series of styles, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow.

When you say it messes up your site when you combine the stylesheets. Have a think about the order in which the files are added. An automated stylesheet combining script can never know how you want the end result to look, all it can do is take what you have and combine it based on a pre-defined set of instructions, not based on how good it will look in the end. So make sure the input is right and the files are combined in the right order.

Here's an interesting link on the cascading order and inheritance in stylesheets, which might be of help.

This is a common problem with template driven CMS's that allow for the loading of various extensions.

The Joomla! extensions directory has an entire section for enhancing "Site Performance" there are a range of popular extensions for combining CSS and Javascript files.

RokBooster is fairly popular.

If you like getting into coding ...here's a solution.

You can bundle your css files into one, dynamically, by creating a php file with something like that:

<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>

Then you may call your stylesheet like that :

<link rel="stylesheet" type="text/css" href="/combcss.php" />