Variables in CSS (very easy to implement in MVC)

.NET
1

The question of using variables in CSS seems to come up from time to time so I decided to do a bit of experimenting and ASP.NET MVC just makes it too easy to implement.

Basically you just point a <link> to your controller, add a MapRoute to get it there, define a class, add some definitions, add a strongly typed view and change the contentType of the view.

That’s it. The thing I’m wondering is if this is in any way useful. I imagine using it for a CMS and including a backend to control the site colors and such may be interesting but I’m not fully convinced.

I wrote up the steps and added a sample project at my site here: http://imaginekitty.com/624/dynamic-css-using-asp-net-mvc/

Comments and criticisms welcome.

2

Nice. Now tack on CSS compression and caching . . .

3

Yeah, caching was the next step but I’m not sure about CSS compression. Unless I write the whole file to the response stream instead of having a view. Hmm. Interesting thought.

I’m still not 100% convinced on CSS needing variables.

4

A Reponse Filter?

5

Ahh!

How’s this:

		public override void Write(byte[] buffer, int offset, int count)
		{
			string html = System.Text.UTF8Encoding.UTF8.GetString(buffer).Replace("  "," ");

			var repl = new Dictionary<string, string> { { "\\r\
", String.Empty }, { "  ", " " }, { "{ ", "{" }, { " }", "}" }, { ";}", "}" }, { ": ", ":" }, { ", ", "," }, { "; ", ";" } };
			html = repl.Aggregate(html, (s, r) => s.Replace(r.Key, r.Value));

			html = Regex.Replace(html, @"/\\*(.|\\\\s)*?\\*/", string.Empty);
			buffer = System.Text.UTF8Encoding.UTF8.GetBytes(html);
			stream.Write(buffer, offset, count);
		}

It brought a 4.96kb file down to 2.74kb.
Zip file on my site updated with this in the example.

6

Hmm. Is any of this even worth wasting the server’s CPU cycles or tying up some memory using the cache? It was an interesting exercise but I just don’t know if it’s worth pursuing any further.

7

Good question–that can really depend on app. I always try and keep a few major performance improvement ideas in the back pocket in case you need one real quick. You should just be able to use the normal ASP.NET MVC caching options though.

8

Yes, I used [OutputCache] in the example. It does consume a bit of memory, right? A few kb of cache isn’t going to make or break anything though. I don’t know if that means it’s just not worth doing or that I may as well because it won’t hurt anything. :stuck_out_tongue:

Here’s the big question though. Since the browser is going to cache the file anyway, it will take it from browser cache instead of from the server after the first visit, right? OutputCaching will only apply for multiple simultaneous hits, right?

9

Homerun solution. Kind of off topic, is MVC 2.0 Enterprise ready? Learning alot from this post alone…

10

You’re too kind. I honestly don’t know that this project has any real world value.

Version 1.0 is the one that comes up if you go to http://asp.net/mvc and download the installer. I believe version 2.0 is still a release candidate. There’s nothing in this project that uses any Version 2.0 only items.

11

By homerun solution I mean, I have never heard of it before. If it is viable in the real-world, like you said, is up to debate. However, i’m the type of person that would rather build my own JavaScript framework, then use jQuery, but that would take ample time and resources. That is why I thought it was a cool idea, just takes imagination.