Dynamic CSS using ASP.NET MVC

I’ve been considering the usefulness of adding a CSS management system to my CMS that I’ve been working on. Here are the steps I’ve taken to implement it.

Create a new MVC applictaion
Open /Views/Shared/Site.Master
1. <link href=”/Css/Site.css” rel=”stylesheet” type=”text/css” />
2. This doesn’t point to anything yet
Open Global.asax
1. Add a MapRoute
  1. routes.MapRoute(“Css”, “Css/{cssFile}.css”, new { controller = “Css”, action = “Index”, cssFile = “Site” });
  2. Now /Css/Site.css points to Css/Index
Add a class Css.cs to Models
1. Add public string Body { get; set; }
2. Add public string Width { get; set; }
3. Add public string Background { get; set; }
Add definitions as desired
Add a view for CssController/Index
1. Make it strongly typed with CSScontrol.Models.Css as the model
Change contenttype in page directive of Views/Css/Index.aspx to “text/css”
That should do it.

I’m not sure that I’m convinced of the usefulness of this idea but it’s possible and easy to implement in your ASP.NET MVC project. The possibility of using variables in a CSS file is intriguing.

You may download a sample of the ~~MVC2 project here.~~MVC3 project here. Let me know if this is a good idea, a horrible idea or just a bit interesting.

Edit – I’ve added a Response.Filter to this to remove extra spaces, tabs, carriage returns/new lines, final semicolons and comments. It brought the 4.96kb file down to 2.74kb. It can be enabled/disbled in Web.config using appSettings key CompressCSS (bool)

This entry was posted on 26Feb10 @ 0946 and is filed under ASP.NET, C#, MVC, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can this page, leave a response or trackback from your own site.

5 Responses to “Dynamic CSS using ASP.NET MVC”

On 8Mar10 at 1104 Mark said:

I’ve added a few modifications to the file but I’m still not sure of the actual usefulness of this idea. Perhaps it is an answer to a question that should never have been asked.

On 29Mar10 at 1623 Iain said:

I think this is a good idea, and is particularly handy for dynamic css in load balanced environments. Good work

On 10Apr10 at 0306 cShift3 said:

Iâ€™m still not sure of the actual usefulness of this idea.

Well, this way you can improve maintainability of the css file and open up for more customization at the same time.

I would also wrap the css inside of a style tag to get the intellisense
and remove the tag in the CSSCompress filter.

Nice post!

On 10Apr10 at 0807 Mark said:

Yes, it does make sense to make use of intellisense. I should have thought of that. Thanks.

I should probably also move the “if (Convert.ToBoolean(System.Configuration.ConfigurationSettings.AppSettings["CompressCSS"]) == true)” to CSSCompressor as well. That way it can still strip the style tags even with CompressCSS set to false.

On 15Aug10 at 1401 Mark said:

Thinking about it more, it seems to fit better with Javascript than CSS. Targetting dynamic content without adding <script> content to the head of a page by allowing the .js file to be dynamic.

Now that makes more sense to me.