Geek Answers Handbook

Combining multiple CSS files into one

What is the best way to combine multiple CSS files into a single 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">

.. in..

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

Just doing cat css/*.css > css/1-3.css doesn't seem to do the trick.

+5
css
source share
4 answers

As long as the argument order for cat matches the original order of the three linked CSS files in the HTML file, the cat method should work as expected.

So give the floor ..

 <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 connection.

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

.. together will be the following link ..

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

.. must be 100% identical.

+7
source share

At the beginning of 3.css you can add:

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

But I prefer to use multiple link tags or, better yet, compress my CSS into 1 file (e.g. YUI compressor ).

+4
source share

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

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

+1
source share

You can always import secondary CSS files from the main CSS, which is included in the HTML. Here is a good and simple tutorial .

0
source share

More articles:


All Articles