asp.net-mvc 功能 - 每个（查看/母版页/用户控制）一个 css 文件答案

【问题标题】：asp.net-mvc feature - one css file per (view / master-page / user-control)asp.net-mvc 功能 - 每个（查看/母版页/用户控制）一个 css 文件
【发布时间】：2011-02-14 09:12:41
【问题描述】：

我正在尝试实现以下功能：

我只想为我呈现的任何页面附加一个 css 文件。以 StackOverflow 站点为例。对于问题页面，我们将有 questions.css 文件。

so.com/questions              --->    questions.css
so.com/question/1234/title    --->    question.css
so.com/about                  --->    about.css
so.com/faq                    --->    faq.css

现在，我知道这些 css 文件共享代码，因为它们可能具有相同的 MasterPage(s) / UserControls。因此，解决方案还需要考虑 MasterPages、视图和用户控件。

那么，对于这类问题，正确的解决方案是什么？

我正在考虑一种解决方案，我将其作为答案，但也许您对此有更好的解决方案？

【问题讨论】：

这是一个更新/相关的解决方案，其中@section Styles 用于视图，@RenderSection("Styles", false) 用于_Layout -- stackoverflow.com/a/5021680/1298685。

标签： asp.net-mvc css

【解决方案1】：

您可以按页面放置 CSS 文件。我要做的第一件事是将以下内容占位符添加到您的 <head> 标记内的母版页：

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

然后在单个视图（例如您的问题视图）上，您可以添加以下内容：

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

【讨论】：

不确定这是否适用于 .ascx（用户控件）。不过我可能是错的。
他的问题是，“我只希望为我呈现的任何页面附加一个 css 文件”。因此，我将其解释为基于每次查看/页面。他只是说视图共享用户控件。
视图使用用户控件和母版页。母版页本身可能有另一个母版页。其中每一个都可能有一个 css 文件。所以渲染结果将是 5-6 个 css 文件。我想自动组合它们。

【解决方案2】：

在母版页的 <head> 元素中添加内容占位符，并在视图中添加 CSS 链接标记。

【讨论】：

所有的想法是为任何视图自动拥有一个 css 文件，无论视图多么复杂。请参阅@Keltex 答案中的其他评论。

【解决方案3】：

一种解决方案如下：使用与视图文件夹相同的约定。我们将在解决方案中拥有一个与 views 文件夹非常相似的 css 文件夹。

这是我们的视图文件夹：

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

所以，这就是我们需要的css文件夹：

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

less 文件是我们编写的文件。 css 文件是我们要向浏览器公开的文件。它们是由构建操作生成的。但是怎么做呢？

每个视图都有一个对应的css 文件。这个css 文件将从以下less 文件构建：

具有相同视图名称的文件。喜欢：Questions.less。
将查看任何母版页/用户控件的视图 (Questions.aspx)，并添加它们 (Site.master.less)。

你怎么看。是否可以实施？这是个好主意吗？

【讨论】：

【解决方案4】：

但是为什么会你这样做呢？

使用 CSS 的原因之一是将所有东西放在一个地方，而不是分散在各处。

如果您需要为不同的视图提供非常不同的样式，您也可以在每个视图的主体标签中放置一个唯一 ID (<body id="index">)，然后使用像 #index #subnav a 这样的选择器为其设置显式样式看法。这样，您可以在 one 样式表中拥有所有内容，并且它仍然可以为您提供跨页面的不同外观，同时轻松共享常用样式。具有此功能的大型样式表在性能方面可能比每个子页面的新 HTTP 请求更有效，并且当您需要更改内容时，它会为您节省大量工作。

另一种方法是在页面上包含两个（或更多）样式表，其中一个包含所有常见样式，另一个在某些方面对每个视图都是唯一的。

如果我处于你的位置，我会很容易地制作一个大样式表。大大简化了一切。

【讨论】：