Server side CSS? Server side JavaScript?

The other day we were restructuring some CSS files in a project I am working on. And we were thinking of the best way to specify one CSS file differently for each end user account in the project since each end user has the ability to control some aspects of the way the site looks when he/she logs in. Specifically each end user can control two main colors in the site's design. After some thoughts we ended up feeling we wanted somehow server side CSS in which we can write our CSS but instead of hardcoding two colors in the file, we want them as variables that we can inject from the server side from some code behind.

Initially I tried out some experiments with aspx files to serve CSS but there were some issues and the solution was not complete. I ended up writing one aspx file, that I called sss.aspx (server side script) which is used to read the CSS files locally, process them (replace variables in them) and then serve them back. The code was also written to support JavaScript files as well and not just CSS files.

To use this file, instead of specifying your CSS file like this:

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

You specify your CSS like this now:

<link rel="stylesheet" type="text/css" href="sss.aspx?sample.css" />

You can also specify several files beside each other, comma separated and the script file will combine them all together into one file and return them to the client, the order of the files on the query string is the order of combing the files. This has the benefit of speeding things since you are now sending all your files as one file in one connection instead of sending several files and waiting in queue due to the 2 connections per domain limitation of the browser. There is a part of the code in sss.aspx file where you can add some default files there that you would always want to serve by default without needing to add the files to the query string. You can also use this file to do the same exact thing with .js files (JavaScript files). The sss.aspx file can be easily modified to include your own script types as well, if you have something other than .css or .js.

The script also supports returning the result as GZIP or DEFLATE compressed, if the client browser supports it. And finally it provides proper cashing handling and proper Last-Modified headers handling. Once the file combined is served to the client, it will not be served again as long as you do not modify the source CSS or JS files. I have written the C# code inline to make it very easy to add to your own projects, just add the sss.aspx file.

Here is a recap of the benefits:

1. Server side script files (CSS and JavaScript) where you can replace server side variables with their appropriate values (method: ReplaceScriptVariables)
2. Combine several script files into one file to speed things up.
3. The returned stream will be compressed if the client browser supports it.
4. Automatically add common script files that you need in all your site without having to specify them each time.
5. Proper cashe handling and proper Last-Modified headers handling.
6. Add your script file types easily.