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.

  1. Create a new MVC applictaion
  2. Open /Views/Shared/Site.Master
    1. <link href=”/Css/Site.css” rel=”stylesheet” type=”text/css” />
    2. This doesn’t point to anything yet
  3. 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
  4. 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; }
  5. Add definitions as desired
  6. Add a view for CssController/Index
    1. Make it strongly typed with CSScontrol.Models.Css as the model
  7. Change contenttype in page directive of Views/Css/Index.aspx to “text/css”
  8. 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)

5 thoughts on “Dynamic CSS using ASP.NET MVC”

  1. 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.

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

  3. 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!

  4. 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.

  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>