In a framework using rewrite rules, how best to integrate CSS and JS?

Question

I've got a framework that routes all incoming URIs through a base file, and to deal with static files I've got a sub-directory /static in which I put all CSS, JS and images (ie. /static/css/main.css) in order to keep things clear.

My own code and plugins deal with this fine, but some times other code needs to be implemented, and often CSS files will try to style up with calls to URIs in those files. How can I deal with this in the best way?

An example ;

/about/company routes to /script?q=about/company and locks in the main structure of the site. However; /static/css/main.css uses a background image from; /static/images/widget/bg-color.png

Since this is a framework I'm not happy to hard-code the /static paths in the CSS files. For one, I don't want to restrict websites to only being served from some root directory. :) For all JS there's objects that deal with this (ie. var x = $xs_dir.js + '/script.js' ;) but nothing exists for CSS. I have five options, I think ;

1. (worst) Have an option in my admin tool that scans all CSS files for URI references, and prepends them with the right static directory, and writing all CSS as if they're static to a root directory.

2. (poor) Rely on the webserver's ability to alias any static directory to one root static directory, and let the admins deal with it.

3. (meh, slow) Serve the CSS files through the framework, filtering URIs with the right static paths.

4. (simplest, but not very easy) Hand-code the static portions of my CSS files for whatever server setup there might be, and just make sure they're easy to find and change.

5. (probably best, but complex?) Have a rewrite rule that detects images in current directory, forwarding them to the static directory, and write all CSS with some recognized dynamic path. (ie. instead of /static/images/img.png do images/img.png and rely on rewrite rules to push it where it needs to go, also restricting the website structure to never have a sub-directory called 'images')

Any additional options? Ideas? I know Joomla and similar has some rewriting of files, and probably do no. 5?

Answer 1

Not sure whether you have an .htaccess file or not, but one option would be to put in a rewrite rule for request under a folder "images" to be redirected to your static (or whatever) folder:

RewriteRule ^[^\?]*(images/)(.*)$ /static/$1$2 [NC,L]

That way you can reference all your images as just /images/whatever.png in your CSS.

If you require a different setup for different servers, you could always have a separate .htaccess file for each environment or server, and version control these.

Answer 2

You can use the HTML base tag http://www.w3schools.com/tags/tag_base.asp to set the path for all relative url in your HTML. However, this might break all your relative link too.

Answer 3

It is probably a bit optimistic to demand this approach from admins, particularly if they don't control the server environment, however:

You can do this by the use of a separate (sub)domain to serve static files. You can then create a separate virtual host in your web server to serve these files. This approach also have the advantage that you can optimize for speed by using a cookie-less domain, and aggressive cache options. In addition, it allows the browser to fire up additional threads against the sub-domain, to download these files in parallel with the rest of the page.

E.G. Google is already hosting a number of open source frameworks which you can use directly, like Jquery UI with the corresponding css.

Another option for admins is to use a reverse proxy, like varnish, to serve and cache any existing file, and then pass every other get uri to the backend server containing framework controller (then the framework files, except for 'router', should be outside of the public folder for security).

I guess that at least having the option to serve static files from a cookie-less domain would be handy, else Duffmanss answer should suffice.