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

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