css - 一个样式表中的不同配色方案

Question

我的主题有不同的风格（不同的配色方案）。

首先，我加载默认的 css，然后加载具有特定颜色等的 css 样式表，具体取决于我要使用的配色方案。

测试我的网站的速度，我注意到延迟，因为我需要加载两个样式表。

有没有办法将所有样式放在一个文件中而不使用两个不同的？这也必须是跨浏览器。

score 2 · Accepted Answer

对于颜色覆盖，您可以将它们嵌套在 id 选择器中，并将该 id 赋予 body 元素以选择配色方案。这将允许您将许多主题存储在一个文件中。

例如

/* defaults */
h1 { color : black; }

/* light theme */
#light h1 { color : grey; } 

/* neon theme */
#neon h1 { color : pink; }

然后设置body类，为

<body id="neon">

如果您使用 LESS，您可以轻松地将顶级样式包裹在整个配色方案中，以保持布局更整洁。例如

#light {
    h1 { color : grey; } 
    p { color : silver; }
}

score 0 · Accepted Answer

根据您的服务器端技术，您应该“捆绑”您的 CSS 和 JS，以便将它们作为一个文件提供给客户端。这也将使您能够压缩和缩小您的 .js 和 .css。

score 0 · Accepted Answer

您应该不会真正注意到加载两个样式表与加载一个样式表的巨大延迟。

但是，要回答您的问题，您可以将第二个样式表文件的所有内容复制到第一个样式表文件的末尾，您应该得到相同的结果。

score 0 · Accepted Answer

将所有样式复制到一个文件中时，可以为 body 定义两个类，并在所有样式前面加上相应的类。

所以你可以拥有<body class="scheme1">并且你的 CSS-Rules 就像.scheme1 h1 {}

score 0 · Accepted Answer

我在一个样式表中有各种配色方案。要演示更改配色方案，请访问http://prettydiff.com/并将配色方案列表中的值更改为不同的值。所做的只是改变 body 标签上的 class 属性，然后引用一个 CSS 文件中的不同 CSS 属性。

score 0 · Accepted Answer

您可以使用更少并缩小 CSS。

你应该使用多个类，例如你可以使用 thisM 或者只是缩小你的 CSS。

<h1 class="big-text theme-blue"></h1>

然后在你的css中你使用诸如M之类的规则

.big-text.theme-blue

6 回答 6