Question

好的，这是bizaare，这是我见过的唯一一家这样做的商店......我们这家商店只有2名开发商。我的老板认为使用辅助方法将css文件单独添加到页面会使我们的网站更有效率，因为在主页中添加样式引用时，每个页面都会获得那些使网站加载速度变慢的样式。

所以我们有一个company.css，这是我们的主要样式，像主要的桶，如页眉，页脚，主要等等。

然后他希望我进入每个代码隐藏，让我们为我们的某个功能说出一组页面，并使用我们创建的实用程序方法动态地将与产品相关的样式表添加到这些页面。例如，假设我们有一个评论＆amp;评级功能。我们提供了所有评论和评论。评论相关的类和ID在Reviews.css。好的。

因此，例如在.aspx.cs页面的Init中，我们把它放在：

Util.AddStylesheet("Ratings.css");

现在，他希望我将样式表包含在我们的评论代码触及.aspx页面的那些页面的代码隐藏中。但是说不要在母版页中引用Reviews.css。

我是唯一一个质疑这种方法的人，并说出拥有母版页的重点是什么？我的意思是，如果你把你所有的.css引用放在你的母版页中，那么说的是现在所有的页面都有这些样式（有些不使用，因为它们与那个页面没有关系），加重你的加载时间为结束用户？

我的意思是共同权利？也许人们会这样做，但我从来没有见过它，这是一个管理噩梦，因为你在整个fing地方都有动态添加某些.css页面到.aspx页面的子集。

对我而言，即使我们是一个每月收到100万次点击的电子商务网站，但是，我的意思是认真地手动添加样式表并绕过将它们全部放在母版页中只是让我大吃一惊。我是唯一一个认为这是疯子的人并质疑他的假设，即这样做会使页面重量过大，因为它们会继承所有样式表，有些会浪费.css，因为它不一定与那个特定的页面有关？对我来说，将它们添加到母版页是一个完成的交易...简单，可维护，谁在乎。

我可以用JS来理解页面权重，但是.css？

Answer 1

您实际想要做的是最小化所发出的http请求总数以及使用的总带宽。如果您从主页面链接了reviews.css文件，则无论您是否使用这些样式，都需要为您网站上的每个页面添加额外的http请求。所以从这个意义上说，你的老板是对的。如果不在全部或大部分页面中使用它，请不要将其放在母版页上。

也就是说，我也不会在代码隐藏中有任何内容，而是用户控件可以放在所需的页面上来呈现样式部分或链接。

Answer 2

我实际上经常做妥协。

我网站中的大多数页面都使用了母版页中声明的所有标准css文件，但是这里和那里的奇数页面使用了一个特殊的样式表。高分辨率视图，打印视图或jquery lighbox / gallery类型控件。

我的ad-hoc样式表加载代码如下：

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace ExtensionMethods
{
    public static class PageExtensions
    {
        public static void AddStyleSheet(this Page page, String Href)
        {
            PageExtensions.AddStyleSheet(page, Href, "all");
        }

        public static void AddStyleSheet(this Page page, String Href, String Media)
        {
            Href = VirtualPathUtility.ToAppRelative(Href);

            if (!PageExtensions.StyleSheetAlreadyExists(page, Href))
            {
                HtmlLink htmlLink = new HtmlLink();
                htmlLink.Href = Href;
                htmlLink.Attributes.Add("rel", "stylesheet");
                htmlLink.Attributes.Add("type", "text/css");
                htmlLink.Attributes.Add("media", Media);

                page.Header.Controls.Add(htmlLink);
            }
        }

        static private bool StyleSheetAlreadyExists(Page page, String Href)
        {
            var preExisting = from Control c in page.Header.Controls
                              where c is HtmlLink && ((HtmlLink)c).Attributes["Href"] == Href
                              select c;

            return preExisting.Any();

        }
    }
}

Answer 3

请记住，默认情况下，CSS文件在浏览器中是CACHED，因此无论如何都只会加载CSS。

根据我的经验，更多单独的CSS文件==更多重复的规则==更大的混乱。

如果你想节省一点带宽，请确保在编写CSS时压缩你的CSS，而不是：

#review 
{
    margin-top:10px;
    margin-left:12px;
    margin-bottom:12px;
    margin-right:35px;
    background-color:#ffffff;
    background-image:url(images/blah.png);
    background-repeat: repeat-x;
}

你写道：

#review{margin:10px 35px 12px 12px;background:#fff url(images/blah.png) no-repeat;}

Answer 4

如何建议妥协？

一个主页面定义了最常用的元素（标题，链接，导航列表等），然后是一个特定于位置的样式表，即catalogue.css，用于需要这些样式的页面。所以css仍然可以被缓存，但不会强迫所有访问about-us页面的人。

这并不理想，但如果目标是减少单个单片css文件的带宽，它可能会让你有所进展。

实际上，我个人的方法总是使用单片样式表;虽然考虑到了这一点，我很想尝试建议的方法。它应该工作？也许...... = /

动态添加CSS会减少页面重量吗？

4 个答案: