2

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?

Georg Fritzsche
  • 97,545
  • 26
  • 194
  • 236
Fitzchak Yitzchaki
  • 9,095
  • 12
  • 56
  • 96
  • Here is a more recent/relevant solution, where `@section Styles` is used in a view and `@RenderSection("Styles", false)` is used in the `_Layout` -- http://stackoverflow.com/a/5021680/1298685 . – Ian Campbell Dec 31 '13 at 20:04

4 Answers4

1

One solution will be as the following: use the same convention as views folder. We will have in the solution a css folder that will be very similar for the views folder.

This is our views folder:

Views
     Home
         Index.aspx
         About.aspx
         Faq.aspx
     Questions
         Questinos.aspx
         QuestionDetails.aspx
     Shared
         Site.master
         Admin.master

So, this is the css folder that we need:

css
   Home
       Index.less
       About.less
       Faq.less
       index.css
       about.css
       faq.css
   Questions
       Questinos.less
       QuestionDetails.less
       questions.css
       question-details.css
   Shared
       Site.master.less
       Admin.master.less

The less files are the files that we write. and the css files are the files that we want to expose to the browser. They are generated by build action. But how?

Each view has a corresponding css file. this css file will be build from the followings less files:

  1. The file with the same view name. like: Questions.less.
  2. Will look at view (Questions.aspx) for any masterpage(s) / usercontrols, and will add them (Site.master.less).

What do you think. Is it possible to implement it? Is it good idea?

Fitzchak Yitzchaki
  • 9,095
  • 12
  • 56
  • 96
1

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 a to 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.

Arve Systad
  • 5,471
  • 1
  • 32
  • 58
  • 1
    "But why would you do this?" : because its a great way to inherit the base css and keep the custom css close to the code. Most modern UI libraries are working like that. I know your answer is dated, but history proved you wrong: its ok to have master css files but it's even better to also have overrides and close to the control and components css also. – Nicolas Belley Dec 01 '22 at 14:14
  • True, but that’ll also require more from your build system etc to be well implemented. For many sites, it’s simply unnecessary. However, for larger apps and especially complex SPAs, I’ll admit modern tooling and techniques makes it a valid strategy. But my answer was, after all, from a time before most modern devs were even born :-) – Arve Systad Dec 02 '22 at 16:53
  • 1
    I know, but your answer is the accepted one, I'm just trying to put some perpective in it. MVC Is a really old tech and people stuck with it would be able to modernize it a bit, and it would go a long way to be able to easily have .css files for each cshtml – Nicolas Belley Dec 02 '22 at 19:49
  • 1
    Yep. Edited the post slightly now. – Arve Systad Dec 14 '22 at 09:04
0

You can put the CSS files on a per page basis. The first thing I would do is add the following content placeholder to your master page inside your <head> tag:

<asp:ContentPlaceHolder ID="ExtraContent" runat="server" />

Then on an individual view (such as your question view), you can add this:

<asp:Content ID="Content3" ContentPlaceHolderID="ExtraContent" runat="server">
    <link href="/Content/question.css" rel="stylesheet" type="text/css" />
</asp:Content>
Keltex
  • 26,220
  • 11
  • 79
  • 111
  • Not sure this works with .ascx (user controls). I could be wrong though. – mxmissile Apr 30 '10 at 19:38
  • His question says, "I want just one css file to be attached for any page that I rendered". So I'm interpreting it to mean it's on a per-view / page basis. He's just saying that the views share user controls. – Keltex Apr 30 '10 at 19:47
  • the view use user controls and masterpage. and the masterpage itself may have another masterpage. each of these has probably a css file. so the rendered result will be 5-6 css files. I want to automatically combine them. – Fitzchak Yitzchaki Apr 30 '10 at 19:50
0

Add a Content Placeholder in your <head> element on your master page and add a CSS link tag in your views.

Aren
  • 54,668
  • 9
  • 68
  • 101
  • The all idea is to have automatically one css file for any view, no matter how complicated the view will be. See the other comment in @Keltex answer. – Fitzchak Yitzchaki Apr 30 '10 at 19:48