Concatenate multiple CSS files into one

Question

What is the best way to concatenate multiple CSS files into one CSS file?

I want to reduce the following ..

<link href="css/1.css" rel="stylesheet" type="text/css" media="all">
<link href="css/2.css" rel="stylesheet" type="text/css" media="all">
<link href="css/3.css" rel="stylesheet" type="text/css" media="all">

.. into ..

<link href="css/1-3.css" rel="stylesheet" type="text/css" media="all">

Simply doing cat css/*.css > css/1-3.css does not seem to do the trick.

Answer 1

At the beginning of 3.css you could add:

@import url(/css/1.css);
@import url(/css/2.css);

But i prefer using multiple link tags, or, even better, compressing my CSS into 1 file (using YUI compressor for example).

Answer 2

You can always import your secondary CSS files from the main CSS that is included in the HTML. Here's a nice and simple tutorial.

Answer 3

As long as the ordering of the arguments for cat matches the original ordering of the three referenced CSS files in the HTML file the cat-method should work as expected.

So given say ..

<link href="css/one.css" rel="stylesheet" type="text/css" media="all">
<link href="css/two.css" rel="stylesheet" type="text/css" media="all">
<link href="css/three.css" rel="stylesheet" type="text/css" media="all">

.. the following concaternation ..

cat css/one.css css/two.css css/three.css > css/all.css

.. together will the following reference ..

<link href="css/all.css" rel="stylesheet" type="text/css" media="all">

.. should be 100 % identical.

Answer 4

You can also use mod_concat or a PHP solution to combine your CSS and JS files.

FYI, Robert Nyman recently wrote an article about optimizing CSS and JavaScript files.