怎么避免这个？ Yslow - ＆gt; “这个页面有5个外部样式表。尝试将它们合并为一个。”

Question

我的网站上有多个主题，用户可以通过点击javascript链接在多个主题之间切换。我有5个CSS文件来处理所有主题的布局。 1代表结构，3代表不同主题的颜色等，1代表其他一些东西。

我的css文件名读起来像这样.. main.css，red.css，green.css，black.css，others.css 红色，绿色和黑色css文件定义为alternate stylesheet s。

我安装了YSLOW！得到"This page has 5 external stylesheets. Try combining them into one."

我只是想知道是否可以将大多数CSS文件组合成更少数量的CSS文件。我知道我们可以定义 `

@media screen
  {
  //screen
  }
@media print
  {
  //print 
  }

`  单个CSS文件中的部分。也可以为多个CSS文件做这样的事情吗？

感谢您的帮助。

Answer 1

你的主要和其他可以合并，然后而不是附加其他三个，你能否在必要时用javascript加载它们？

这样的事情：

<link rel="stylesheet" href="style1.css" id="stylesheet">

<script type="text/javascript">

function changeStyle() {
    document.getElementById('stylesheet').href = 'style2.css';
}

</script>

Answer 2

合并两个常见样式表，并忽略YSlow作为替代样式表。 YSlow是一种工具，而不是法律的执行者。

Answer 3

您可以，而不是交换样式表，将样式表合并为一个，并改为使用正文上的类来更改颜色。通过示例更容易描述：

说你目前有

red.css

body { color:red; }

green.css

body { color:green; }

然后用JavaScript交换它们。

为什么不将其更改为：

colors.css

body.red { color:red; }
body.green { color:green; }

并使用JavaScript交换正文中的类。那么你只有一个CSS文件，JavaScript也更简单。

Answer 4

您可以向body标记添加class属性，并通过JavaScript进行更改。然后，您可以将所有样式表合并为一个。

用于编写样式表的有用工具是HSS，它可以帮助您创建嵌套结构。