Using C# to dynamically generate CSS files

Question

I have a site that gets deployed to over a dozen clients. The main website has a base template, and each client has a client folder that overrides the colours. The problem is that there are a lot of CSS files, so making a change that forces us to update every client takes a long time. The automated build process takes care of replacing the updated files.

I would like to change the CSS files to be usercontrols instead, and those usercontrols could then inherit from another usercontrol where client specific values are stored.

So instead of having a forms.css file and then a /client/forms.css file I would have a Forms.ascx file that inherits from a usercontrol that contains the colours.

Ex:

<%@ Control Language="C#" ClassName="Forms" %>
<%@ Register TagPrefix="css" TagName="Client" Src="~/css/ClientStyling.ascx" %>

/* CSS Document */
body
{
  color:<%=Client.BodyColor%>
}

Then the masterpage would inherit from the usercontrol instead. This would make the maintenance of the client sites much easier.

So is this solution efficient and recommended? Or is there a better way to accomplish the same end result?

If this is possible, would it also be possible to have the Forms.ascx control output the markup as CSS? Or make the extension .css and still have the ascx properties?

Answer 1

Instead of a Web Control, you're likely better off creating a Generic Handler. This won't have the overhead that a web control has.

1. In your handler, accept the clientID via querystring - this allows you to cache on a client level
2. In your .master file, you can link to it < link src="MyCssHandler.ashx?ClientID=<%=ClientID%>" >

In your handler you have a few ways to work with the CSS.

1. Just have a bunch of response.write for the css, and put in relevant client values
2. Create an external CSS file with it's own special identifier - maybe <% %>. You could then load all the client specific values in a NameValuePair Collection, and then loop through the external CSS file, parsing <% NAME %> and replacing with the correct value. Then response.write this file. More complicated true but it allows for a hell of a lot cleaner CSS files