How to avoid this? Yslow -> "This page has 5 external stylesheets. Try combining them into one."

Question

hi

I have multiple themes on my website and users can just switch between multiple themes by clicking on a javascript link. I have 5 CSS files to handle the layout of all of the themes. 1 is for structure, 3 are for colors etc for different themes, and 1 common for some other stuff.

my css filenames read like this .. main.css, red.css, green.css, black.css, others.css With red, green and black css files are defined as alternate stylesheets.

I have installed YSLOW! and get "This page has 5 external stylesheets. Try combining them into one."

I was just wondering if it is possible to combine most of them into a fewer numbers of CSS files. I know that we can define `

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

` sections in a single CSS file. Can something like this be done for multiple CSS files as well?

Thanks for your help.

Answer 1

You could, instead of swapping stylesheets, combine the stylesheets into one and change the colours with a class on the body instead. This is easier to describe with an example:

Say you currently have

red.css

body { color:red; }

green.css

body { color:green; }

and you swap between them with JavaScript.

Why not change that to:

colors.css

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

and swap the class on the body with JavaScript. Then you only have one CSS file and the JavaScript is much simpler too.

Answer 2

Your main and other can be combined, then rather than attaching the other three, can you not jsut load them with javascript when necessary?

Something like this:

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

<script type="text/javascript">

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

</script>

Answer 3

Combine the two common stylesheets, and ignore YSlow for the alternative ones. YSlow is a tool, not the enforcer of the law.

Answer 4

You could add a class attribute to the body tag and change this by JavaScript. Then you could combine all stylesheet into one.

An interessting tool for writing stylesheets is HSS it helps you to create nested structures.