Don't apply css on specific page

Question

Is it possible and how to do not apply css on specific web page?

---

For example, i have some div's on Master Page and some css for them

.header {...}

But i have also some page (Home page), which is different from all site-style.

So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :

#specific.header{...}

---

Maybe there is solution such as add new Master Page.

---

Is it good to add some css using JS before page is loaded?

Answer 1

Maybe you can try any of these options:

• Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}

This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}

• Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.