Question

我负责使用我刚刚继承的大型CSS文件（数千个元素）为网站提供主题功能。基本上我们希望允许用户能够更改屏幕上的颜色。

除了颜色定义之外，每个CSS元素还有许多其他属性 - 大小，字体，浮点数等......同样，各种CSS元素中都会出现特定的颜色。

如果我使用ASP.NET的主题功能为每个主题创建一个不同的CSS文件，我必须在所有主题中复制我的CSS文件，这将成为维护的噩梦。

最理想的是，我希望有一个CSS文件（用于维护），并且只能更改颜色属性。

这里有什么选择？

Answer 1

您只需要复制颜色属性，如果您有

a:hover
{
   text-decoration:none;
   color:Black;
   display:block    
}

在您主题的css文件中，您只需要：

a:hover
{
    color:Red;
}

现在，在您的页面中，您要确保仍然引用原始css文件，浏览器将合并所有样式。

Answer 2

如果差异很小，可能的方法是CSS级联规则，例如：

HTML：

<body class="dark">
    <a ...>some text</a>
</body>

的CSS：

/* default */
body { color:white }
    a { color:blue }

/* dark theme */
body.dark { color:black }
    .dark a { color:white }

Answer 3

我认为保留一个CSS文件可能是一个坏主意，特别是因为主题的目的是拥有多个。我建议使用两个CSS文件，基本一个（你已经使用过的）和当前主题，它们在基础之后被包含/链接，并覆盖你想要的基础。

Answer 4

和TravisO一样，我建议使用两个CSS文件...但我不会让你的基本文件已经使用了。我将从您的基础数据中提取所有颜色数据，并将其添加到新的“默认”主题中。

这样，您的定位详细信息都在一个位置，您的主题只有颜色信息。除了主题颜色外，还可以节省浏览器下载和解释默认颜色的时间。

Answer 5

请记住：元素可以有多个样式类。由于布局保持静态并且与着色分开，因此您需要在完全不同的文件中分别为布局和颜色定义类。

所以你想要为主题做的是在一个单独的css文件中定义一些颜色，如下所示：

.DefaultBackgroundColor { background-color: white; }

.PrimaryColor { background-color: #123456; }
.PrimaryAsForeground  { color: #123456; }

.AccentColor { background-color: #654321; }
.AccentAsForeground { color: #654321; }

.ComplementColor { background-color: #333333; }
.ComplementAsForeground { color: #333333; }

.DefaultTextColor { color:black; }
.HighlightTextColor { color:black; font-style:bold; }
.ComplementTextColor { color:white; }

你可以添加更多颜色，但你明白了。然后，在HTML中，除了布局类之外，还将这些类添加到元素中。例如，使用这些类可以为StackOverflow设置Nav按钮的样式，如下所示：

<div class="nav ComplementTextColor">
    <ul class="primarynav">
         <li class="PrimaryColor"><a href="/questions">Questions</a></li> <!-- selected -->
         <li class="ComplementColor"><a href="/tags">Tags</a></li>
         <li class="ComplementColor"><a href="/users">Users</a></li> 
         <li class="ComplementColor"><a href="/badges">Badges</a></li>
         <li class="ComplementColor"><a href="/unanswered">Unanswered</a></li>
    </ul>
</div>

显然，这些颜色是组合起来的，不会一起使用，但这就是这种设置的美妙之处。这样可以很容易地玩和调整颜色，因为您不必在整个地方定义相同的颜色。您只需设置一次，然后只需进行少量更改即可完全重新着色网站。

缺点是你是有限的。例如，使用我发布的html，你不能通过更改css文件来使这里的按钮与其他所有颜色不同，因为我们没有为它设置'hook'。但是你可以通过一个简单的编辑改变他们在这里使用的那种丑陋的橙色。

Answer 6

我将不得不考虑TravisO的想法。

在这种情况下，保留一个文件实际上会比创建单独的css文件产生更大的维护开销。你需要的是一个适用于所有主题的基本css文件（通常是我的root / styles文件夹），然后是每个主题中的文件，用于着色信息（或任何其他主题特定的css）。

.NET - 如何为大CSS文件构建主题

6 个答案: