Have Geek Brain

Asp.net-mvc function - one css file per (view / master page / user control)

I am trying to implement the following function:

I want only one css file to be attached for any page that I display. Take the StackOverflow site for example. On the questions page, we will have a 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 these css files share common code because they might have the same MasterPage (s) / UserControls. Thus, the solution should take MasterPages, views and usercontrols into account.

So what would be the correct solution to this problem?

I am thinking of one solution, I put this as an answer, but maybe you have a better solution for this?

+2


a source to share


4 answers


But why would you do that?

One of the reasons for using CSS is to have everything in one place and not scattered around.

If you need very different styles for different views, you can pinpoint a unique ID in the body tag on each view ( <body id="index">

) and then use type selectors #index #subnav a

to set explicit styles for that View. This way you can have everything in one stylesheet and it will still give you different looks for pages and also make it easy to use common styles. One big stylesheet with this will probably be more efficient than new HTTP requests per subpage from a performance standpoint, and it will save you a lot of work when you need to change stuff.



Another approach would be to include two (or more) style sheets on the page, where one contains all the common styles and the other is unique to each view.

If I were in your shoes, I could easily make one big stylesheet. Simplifies everything so much.

+1


a source


One solution would be this: use the same convention as in the views folder. The solution will have a css folder which will be very similar to 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 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


Files less

are files that we write. and files css

are files that we want to open in the browser. They are generated by the build action. But how?

Each species has a corresponding file css

. this file css

will be created from the following files less

:

  • File with the same name. for example: Questions.less.
  • Take a look at the view (Questions.aspx) for any master page (s) / usercontrols and add them (Site.master.less).

What do you think. Can you implement it? Is this a good idea?

+1


a source


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

:

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

Then, on a customized view (like in your question's question), you can add this:

<asp:Content ID="Content3" ContentPlaceHolderID="ExtraContent" runat="server">
    <link href="/Content/question.css" rel="stylesheet" type="text/css" />
</asp:Content>
0


a source


Add a content placeholder to your <head>

element on the master page and add a CSS link tag to your views.

0


a source






More articles:


All Articles