Best way to import multiple css files

grahamor

Hi,

We are remaking a large language website. The css is grouped into type,forms,grid,ie6 etc.

We need to make only 1 http request to the server for the CSS, so, instead of linking each sheet on the page, i was wondering if i could have a dynamic file that imports all the stylesheets ?

If anyone has any suggestions on the best way to do this please let me know..

Thanks

Eoin

Off the top of my head, I would say a server-side script that combines all the files into one that is included in the pages. So, you upload forms.css, grid.css, ie6.css when you've made changes, and then run a script that concatenates them all into one stylesheet.

seamus

Yep, if you've got server side scripting, you could use PHP.

You have one file called, say "style.css.php", which includes all the other css files, e..g

[php]
<?php
include("css/type.css");
include("css/forms.css");
include("css/grid.css");
include("css/ie6.css");

?>[/php]

zAbbo

Create a master CSS file, and put the import references there

/* CSS Master - /css-styles/master.css */

@import url("/css-styles/ie6.css");
@import url("/css-styles/grid.css");
@import url("/css-styles/menu.css");
@import url("/css-styles/form.css");

/* END Import */

And link it as normal in your HTML

<link rel="stylesheet" href="/css-styles/master.css" type="text/css"  />

Eoin

That would still result in multiple HTTP requests though.

seamus

Indeed.

OP, is there any particular reason why you want to reduce the overhead on requests?

Most servers and browsers create persistent connections when retrieving pages, instead of an individual connection per file. The overhead of having multiple files tends to be negligible - the volume of data is identical.

dkell

You could take a look at Minify, it can be used for JS & CSS (although I haven't tried it out yet)

p

Unless it's a high performance website, then it's probably not a problem. i'd say the hassle of coming up with a solution, may negate it's benefits for general maintenance and future updates. Unless you're having a problem with a slow website and you really need to optimize, it's probably not neccessary.

democrates

Bizarre I was only thinking about this yesterday.
The thing is a given visitor might hit say 5 pages on your site, seperate css files cached at the client works fine but if you create a custom css collation per page you lose the cache win and end up increasing transmission overhead.