I’m trying to implement the following feature:
I want just one css file to be attached for any page that I rendered. For example take StackOverflow site. For the questions page, we will have questions.css file.
so.com/questions ---> questions.css
so.com/question/1234/title ---> question.css
so.com/about ---> about.css
so.com/faq ---> faq.css
Now, I know that this css files share code in common, because they may have the same MasterPage(s) / UserControls. So, the solution need to take into account MasterPages, views and usercontrols as well.
So, what will be the right solution for this kind of problem?
I’m thinking about one solution, I’ll put is as an answer, but maybe you have a better solution for this?
EDIT: Since this is the accepted answer and still gets reads: Do look at it through a historic lens. What was valid in 2010 is likely no longer the recommended approach in whatever year you’re reading this.
But why would you do this?
One of the reasons to use CSS is to have everything in one place, instead of scattered around.
If you need very different styles to the different views, you could just as well put a unique ID in the body tag on each view (
<body id="index">), and then use selectors like#index #subnav ato set explicit styles to that view. This way, you can have everything in one stylesheet, and it will still give you different looks across pages, while easily sharing the common styles. One large stylesheet with this will probably be more efficient than new HTTP-requests per sub-page, performance-wise, and it will save you a lot of work when you need to change stuff.A different approach would be to include two (or more) stylesheets on the page, where one contains all the common styles, and the other one is unique per view in some way.
If I were in your position, I’d easily have made one big stylesheet. Simplifies everything so much.