An Efficient Way to Merge 2 Large CSS Files

An efficient way to merge 2 large CSS files

Try

CSS Compressor & Minifier

It have lots of options, you can compress and/or minify css.

Copy both CSS files into CSS input
Turn on Sort selectors and properties
Obtain output
Manually remove duplicates
Re-enter input
compress or minify your output

css best practices - combining all css into a single stylesheet?

You should combine all your CSS into one file to reduce the amount of requests made to your server.

A similar topic is sprite sheets, the combination of multiple images into one large image to also reduce the amount of requests made to your server.

You'll find that loading 100x 5kb files is a lot slower than loading a single 500kb file.

When you're ready to upload your files to a live environment, you should also consider compressing your CSS and JavaScript files. There are a vast amount of online tools for this, eg:

CSS Compressor.
JavaScript Compressor.
HTML Compressor.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

Will merging two css files improve the webpage performance?

No, it's the same.
Performance improving could be accomplished in some different ways (e.g. removing unused or duplicated styles).

Multiple CSS files and performance

Merging all of your css files into one will absolutely gain performance. Whether that performance is noticeable depends on your load, number of requests etc. For the average blog, this will have close to zero impact.

Read Best practices for speeding up your web site at Yahoo! Developer. It'll explain things way better than i can.

As you say, a reason not to merge css files is for maintainability. However, there are many tools out there which automatically merge and minify your css files into one.

You should check out YUI Compressor, this will help you with merging and minifing your css files.

Multiple CSS files in header?

Yes their is a point in it. I have for example a design.css that handles all of the colors, a layout.css pure for positioning and sizes and I have a interaction.css which handles the animations etc..

There is no problem in combining the CSS file as long as it doesnt affect readability.. Just keep in mind that the structure must remain:

file1.css
file2.css

results in on file containing the below code in the same order:

/* content of file1.css */
/* content of file2.css */

Multiple CSS files including the libraries files VS one huge file include all libraries css files

I personally would stick with 1 minified css file.
BUT in your case both options would be okay.

1 minified file - everything loads at the same time and hopefully the size of the file isn't too large.

3 separate files - when updating your sites CSS then the browser has to re-download only 1 file. bootstrap.css and hover.css would be cached for as long as you have set it on BE side (css changes don't affect them).

Whatever you do. Don't forget to gzip the css :)

Combine Javascript/CSS into one file or two for better optimization

Well, there are two main schools of thought.

The first, is reduce the number of HTTP requests as much as possible. This would say to reduce ALL CSS files down to one monster. It's better to download 400kb once, than multiple 50kb files. (and the same for JS).

The other is to combine where necessary, but no further. If you have 100kb of CSS that's only needed on one section of the site, there's no reason to slow the rest of the site down for your users. This is especially true for JS since there are lots of sites that include jQuery (for example) on every page because 10% of the site uses it.

My take on it is a combination of the two. If I use code on about 50% of the site or more, I include it in the "master" file. If the code is small (less than 5kb or 10kb), I include it in the master file. Otherwise I split it to separate files.

The whole reason for any of this is to make the user experience better. You could do a giant brute force and load all css and JS in 2 respective files every page load (sure it would be cached). But if the landing page doesn't need 50% of that code, you're needlessly slowing down the page with the biggest impact.

And that's why I believe that the best solution to this problem is to have a human analyze the situation. They can look for duplicates and abstractions. They can look at the needs of the page/site and determine the best scenario. Unless you want to make your program do that (which would be difficult), it's not going to give the best result (but then again, there is a difference between good and good-enough)...

That's my $0.02 anyway...

Merging 2 css files (one for desktop and one for tablets) into One with Media

You might want to use the @import method, which would allow you to have your main styles in one sheet and only the mobile styles in the other but only use one <link> element. There are some speed issues which, among other related information, is covered in This SO Answer, but the way this would work in your example is to only have one <link href="<?= base_url('css/style.css') ?>" rel="stylesheet" media="(min-width: 1210px)"/>

And inside the main file, you would have a width-dependent reference in that file that looks similar to this:

@import url("/css/style-tablet.css") (min-width: 740px) and (max-width: 1209px);

As far as speeding up a merge, WinMerge, is a great (and free) tool that has been useful for me in the past.

If you want to do merging like this automatically, you are probably going to need to work with a CSS preprocessor like LessCSS or SASS.

An Efficient Way to Merge 2 Large CSS Files