Question

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

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

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

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

Answer 1

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

例如

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

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

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

然后将身体类设置为

<body id="neon">

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

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

Answer 2

你不应该注意到加载两个样式表与加载样式表有很大的延迟。

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

Answer 3

将所有样式复制到一个文件中时，您可以为body定义两个类，并使用相应的类为所有样式添加前缀。

所以你可以<body class="scheme1">，你的CSS规则就像.scheme1 h1 {}

Answer 4

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

Answer 5

您可以使用less并缩小CSS。

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

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

然后在你用css你使用诸如M

之类的规则

.big-text.theme-blue

Answer 6

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