-2

In an HTML file i have got the following css files . 

 <link href=style.css rel=stylesheet>
<link href="css/responsive.css" rel=stylesheet>
<link href="css/custom.css" rel=stylesheet>
<link href='css/fonts.css' rel=stylesheet type='text/css'>
<link rel="shortcut icon" href="">
<link href="css/jquery-ui.css" rel=stylesheet>

When i run the gtmetrics tool for page optimization it says that

This page has 7 external stylesheets. Try combining them into one.

I tried combing them into one as

<link  type="text/css" href="reset.css,css/style.css,css/responsive.css,css/custom.css,css/fonts.css,css/jquery-ui.css" rel=stylesheet>

but the css didn't loaded , please let me know how to combine them into one.

Pawan
  • 31,545
  • 102
  • 256
  • 434
  • 1
    The idea is not to reference all files from one link tag, but to combine all contents into one single CSS file... – Cedric Reichenbach Nov 30 '15 at 13:35
  • To combine them, use node.js modules(Gulp, Grunt etc) http://stackoverflow.com/questions/26273358/gulp-minify-all-css-files-to-a-single-file – m4n0 Nov 30 '15 at 13:35
  • So people will hate this answer since it's not tool heavy, but why not just in your build process run cat example1.css example2.css > global.css webpack does things like this as well, but it kind of heavy and I'm always skeptical about adding so many things to the code. As an example, I've noticed that the popular css-loader/style-loader seems to bloat file size quite a bit. I see lots of people go crazy with these, and the crazy part is that you're adding quite a bit of complexity in between what you see and what is actually running. – Bradford Medeiros Sep 10 '18 at 06:28

2 Answers2

3

Create a new css file and name it main.css.

Put this the following as the content of main.css:

@import url("style.css");
@import url("css/responsive.css");
@import url("css/custom.css");
@import url("css/fonts.css");
@import url("css/jquery-ui.css");

Eventually you just have to link your html file to only main.css.

The resulting code you provided will be like so:

<link href="main.css" rel=stylesheet>
<link rel="shortcut icon" href="">

Note that <link rel="shortcut icon" href=""> is for adding favicon and is a bit different from linking css files.

Ahs N
  • 8,233
  • 1
  • 28
  • 33
0

Check out https://github.com/mrclay/minify

You can combine multiple CSS/JS files without having to physically combine them.

Example: <script src="/css/style.css,css/main.css"></script>

Chris
  • 432
  • 3
  • 11
  • If understand it correctly, even if you are using this tool you can't use it like this: `/css/style.css,css/main.css`. It's still need to be a valid URL. You can set the `src` attribute to `http://example.org/min/f=min/quick-test.js`. The server will return all the scripts in one file. – Mosh Feu Nov 30 '15 at 13:54