How to avoid this? Yslow & # 8594; "This page has 5 external style sheets. Try combining them into one."

Question

I have several themes on my website, and users can simply switch between several themes by clicking on the javascript link. I have 5 CSS files to handle the layout of all themes. 1 for structure, 3 for flowers, etc. For different topics and 1 common to some other things.

my css file names are 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 installed YSLOW! and get"This page has 5 external stylesheets. Try combining them into one."

I'm just wondering if most of them can be combined into fewer CSS files. I know that we can define `

@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

You can add a class attribute to the body tag and change it to JavaScript. Then you can combine all the stylesheets into one.

The search tool for writing HSS styles helps you create nested structures.