Is it possible to include a folder of css files?

Question

I have about 100 stylesheets that apply the same style to one document, exactly like the zen css page, and I can list these files 1 by 1 in head but they are all in the same folder so it seems like there is an easier way. And that is...?

I'm using this with ruby, but I would rather just list a folder.

<% Highlight.all.each do |hl| %>
    <%= stylesheet_link_tag "css/#{hl.name}" %>
<% end %> 

looking at zen garden this is their source

---

Added after some answers were posted

Here is one file

<style type="text/css" title="currentStyle" media="screen">
@import "/205/205.css";</style>

Here is a second css style

<style type="text/css" title="currentStyle" media="screen">
    @import "/001/001.css";
</style>

What is the @import? What does this do/mean?

Answer 1

1. You could create a server-side script, that given a path, will include all the css files in it, and will return the concatenated response.

2. You can statically concatenate your files once, and simply serve a single css file. You would need to reapply the concatenation process whenever you modify any of the files in the directory.

3. Using @import url(""); in a main css file, as suggested by @Dustin Laine in the other answer.

There are some advantages and disadvantages for each approach:

• For #1: You need to write the script, or use an existing one. You could also implement some simple caching mechanism in order not to fetch and concatenate the files on each request. The good thing is that the css is served in just one HTTP request.

• For #2: Similar to the above. The added disadvantage is that you have to manually trigger the packaging of the css files as one concatenated file. Your web server should be able to serve static files very efficiently, but with proper caching, the previous solution could be made as efficient as this one.

• For #3: Probably the simplest method, but this will issue a separate HTTP request for each CSS file. This doesn't help front-end rendering performance, apart from the additional hits to the web server. With hundreds of css files, I don't think I would consider this option.

Answer 2

No there is no way, with CSS and HTML only, to include a directory of files. You can use one file that includes the others, giving you a more modular way of inserting the files:

@import url("stylesheet1.css");
@import url("stylesheet2.css");
@import url("stylesheet3.css");
...

If you can use a server side language you can automatically insert files in numerous ways.

Answer 3

You should probably be merging them server-side anyway from a performance point of view.

You don't mention your language or architecture, but there are tools for concatenating and minifying these files.

Answer 4

There isn't anyway to automatically download an entire folder (or all files contained within a directory's tree) with CSS, HTML, or JS (although it would be possible with JS + a server side script).

The best solution I've found is writing a shell script to package up all the CSS / JS files used in a project into a single file. Not only will this improve page load time on the production site but it allows you to easily compress the code.

Here a couple links to help you out:

• Bundling script that has a dev / production flag
• CSS Optimizer
• Javascript Optimizer
• Apache script to optionally serve statically compressed css / js files
• Another Apache script to handle css / js (along with images and other static content) caching

Answer 5

I would do this serverside...

Make the links to other themes pass a parameter, call it ThemeID, then something like

<link href="styles/<%= Request.ThemeID %>.css" rel="stylesheet" type="text/css">