Is it possible to edit css file in a running mvc site?

I have an MVC site which is colored black and white except for certain design elements, which are colored with one specific color (let's say blue). I do all the coloring from css.

What I want to do is to switch this color from time to time to another one. Problem is, that if I do this switching lets say from jquery when the document is loaded, the colors in an async loading element wont change.

Is it possible to change the css file 开发者_运维问答itself from MVC, or maybe there is an event for async loaded elements too?

What about placing the different elements in different files and then including only the one you care about? For example:

In file default.css

#myDiv {
    color: blue;
}

Now I can have other files.. .let's say red.css.

#myDiv {
    color: red !important;
}

Now in your master page you can load the red.css based on whatever business logic you like. Here's a sample:

<link rel="stylesheet" type="text/css" href="/css/default.css" />
<% if (SomeCondition) { %>
    <link rel="stylesheet" type="text/css" href="/css/red.css" />
<% } %>

How frequently are your colors going to change? If the change isn't happening very often, you could create an action method that returns a different stylesheet based on the current time.

public ActionResult GetCss() {
    string stylesheet = GetStylesFromSomewhere();
    return Content(stylesheet, "text/css");
}

I reread the quetion and considered that I should give a whole different answer.

The css is mainly declarative. This is a big convenience. If you declare something that is that way, you don't need to care about reapplying the css on new element, or reprocessing the DOM. It happens "in the browser". Imperatively changing the new elements to a new state every time something (e.g. adding a new element) happens is not just inconvenient but can lead to a whole lot of mistakes. So no there is no general event for "async loaded elements", but you shouldn't be looking for one.

CACHING

In any web environment having a constant css file is mainly a good idea. The browser caches the css, and can use it every time it's needed. If you change your css, the browser won't notice. Of course there are a lot of settings to consider, but it's true in most cases.

So if you could edit your css file it won't really matter as you would need to somehow tell the browser to notice the change.

There is a technique called cache-busting which is mainly putting a GET parameter after the css, like:

<link href="https://www.famous-cats.com/style/puna.css?v=3" rel="stylesheet" type="text/css" />

The browser thinks that ?v=1 is different from ?v=2, although you just referenced the same file. So it will cache it's every version with different GET parameters.

OK.

CHANGING FILES

But even if you change the file: is it a good idea to change the css file itself? If 95% of the rules are the same every time (everything that is not about that 1 color), you might want to separate it in a "main" file, and only change the parts about the colors, which can be in a different file/inline html.

An other thing about changing files is that if you are not planning on procedurally generating new styles you should just write constant files and switch them.

DOTLESS

It's a port of lesscss to asp.net. Check http://lesscss.org/ for it's features, it's basically sass with a slightly different syntax.

The good thing about it is that you can use variables, and get it's values from url parameters, so if you link style.less?color=fuschia it will just set the variable named "color" to your favorite color.

Less is neat stuff and can considerably reduce the development time.

THE SOLUTION I RECOMMEND

Just do the coloring in a css different from the main one:

<link href="https://www.famous-cats.com/style/main.css" rel="stylesheet" type="text/css" />
<link href="https://www.famous-cats.com/style/color.less?color=00FF55" id="colorcss" rel="stylesheet" type="text/css" />

And if you need to change the colors, just call:

document.getElementById('colorcss').href = 'color.less?color=F35741';

(I have given the link tag an id).

And it works.

Dive into less a little more and check how you can use color variables. You can make it possible on the admin to just select that one color.

Also inline css is not the work of the devil, you can easily create it in razor. If it is just a few rules it won't hurt anyone. So if you are not into less, you can use inline css, or generate the css with an MVC controller-action (just set the mimetype to text/css, and use an url parameter for color changing/cache busting).

I hope this answers your question.