.NET - 如何为大型 CSS 文件构建主题
Posted
技术标签:
【中文标题】.NET - 如何为大型 CSS 文件构建主题【英文标题】：.NET - How to build themes for big CSS files 【发布时间】：2010-09-26 07:51:45 【问题描述】：我负责使用我刚刚继承的大型 CSS 文件（数千个元素）为网站提供主题功能。 基本上我们想让用户能够改变屏幕上的颜色。
每个 CSS 元素，除了颜色定义之外，还有很多其他属性 - 大小、字体、浮点数等...此外，各种 CSS 元素中还会出现特定的颜色。
如果我使用 ASP.NET 的主题功能为每个主题创建不同的 CSS 文件，我必须在所有主题中复制我的 CSS 文件，这将成为维护的噩梦。
我希望有一个 CSS 文件（用于维护）并且只能更改颜色属性。
这里有哪些选项？
【问题讨论】：
【参考方案1】：你只需要复制颜色属性，所以如果你有
a:hover
text-decoration:none;
color:Black;
display:block
在您的主题中的 css 文件中，您只需要：
a:hover
color:Red;
现在您要确保在您的页面中仍然引用原始 css 文件，并且浏览器将合并所有样式。
【讨论】：
【参考方案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
【讨论】：
正如你所说 - 这对细微的差异有好处，不幸的是目前情况并非如此【参考方案3】：我认为保留一个 CSS 文件可能不是一个好主意，尤其是因为主题的目的是拥有多个。我建议使用两个 CSS 文件，一个是基本的（你已经使用的）和当前的主题，它们在基本的文件之后被包含/链接，并覆盖你想要的与基本不同的东西。
【讨论】：
【参考方案4】：记住：元素可以有多个样式类。由于布局保持静态并且与着色分开，因此您希望在完全不同的文件中分别定义布局和颜色的类。
所以你想要为主题做的是在一个单独的 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 中，除了布局类之外，您还可以将这些类添加到元素中。例如，使用这些类，您可以为 *** 设置导航按钮的样式，如下所示：
<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 文件来使此处的按钮与其他所有按钮颜色不同，因为我们没有为它设置“挂钩”。但是你可以通过一个简单的编辑来改变他们在这里使用的那种难看的橙色。
【讨论】：
【参考方案5】：像 TravisO 一样，我建议使用两个 CSS 文件...但我不会使用您已经使用的基础文件。我将从您的基础数据中提取所有颜色数据并将其添加到新的“默认”主题中。
这样，您的定位详细信息都在一个位置，并且您的主题只有颜色信息。除了主题颜色之外，还节省了浏览器下载和解释默认颜色的时间。
【讨论】：
【参考方案6】：我将不得不接受 TravisO 的想法。
在这种情况下，与创建单独的 css 文件相比，保留一个文件实际上会产生更大的维护开销。您需要的是一个适用于所有主题（我通常是根/样式文件夹）的某个位置的基本 css 文件，然后是每个主题中用于着色信息（或任何其他主题特定 css）的文件。
【讨论】：
以上是关于.NET - 如何为大型 CSS 文件构建主题的主要内容，如果未能解决你的问题，请参考以下文章
如何为 .Net Embedding (Github Embeddinator-4000) 构建 objcgen 工具？