ASP.NET MVC Modify CSS links via code (runtime/development)?

Question

Hi there,

does anyone know of a good way of doing the following, I need to have available via CSS Links up to 5 CSS files in one, this is pretty bad for trips to the server.. but it helps me keep it organized...

At runtime i automatically consolidate and minify all css files into 1 ...

What i was wondering is how to have links to css files in my source at design time and different at runtime??

Is there some special workaround i can do with <% %> tags?

Thanks

Answer 1

I use if (false) with HtmlHelper extensions to achieve similar effects. It might look like:

<% if (false) { %>
   <link href="../content/styles/jquery-ui.css" ...
   <link href="../content/styles/site.css" ...
<% } %>
<%= Html.CSS( "jquery-ui.css", "site.css", ... ) %>

Answer 2

You can try the following in your view or master page:

1) Leave the min'ed CSS links in as they are

2) Use this conditional block to include the CSS files directly as needed for design time:

<% if (this.DesignMode) { %>
 <link rel="stylesheet" type="text/stylesheet" href="css/styles.css" />
<% } %>

Answer 3

You could have one link to the combined file in your HTML and use a build event to combine your separate ones in to the one file. That way, during dev you always see your neat separate files but the designer (and at runtime) will always see the combined file. The designer doesn't care of there is one or 5 files but you do. This way you don't have to do any conditional design-time only logic and your code will be cleaner.