How to minimize the no of css

Question

Just like javascript compressor, i use the same technique for css. First, i merge all the file into a single file and then compressor. But, the behaviour of HTML is not same as earlier with multiple css file. What is the best way to minimize the the no of CSS File?

Answer 1

Are you merging them into a single file in the proper order? Since CSS allows overriding earlier rules, you may need to be careful about which portion of the combined file comes before what other portions.

Answer 2

The behavior of your HTML generally should not change. If this does indeed happen, I'm guessing that you have conflicting rules that overwrite one another, and that the CSS files are not being merged in the same order as they were previously loaded.

Answer 3

Check the order of loading you files into the merge script, like others have mentioned. I found Sprockets to be good tool for dependency management. It keeps track of changes in your files and outputs a single file, ready for compression. It will also work with your CSS files.

Answer 4

As long as the CSS files are in the same folder, they are concatenated in the same order as they were loaded in the pages, and the resulting file is placed in the same folder as the original files, there should be no problem.

The order of the styles matter if they are conflicting, as the style last specified will take precedence.

The location of the files matter for any relative image URLs that you specify, as they are relative to the CSS file, not relative to the web page.

Answer 5

Make sure your HTML is valid. If your browser is in quirks mode, it may be using CSS that your compressor thinks is unneccessary.

Answer 6

Could it be, that you merge, by mistake perhaps, also your print stylesheets into the main stylesheet? (Just a guess.)

If so, and you'd like to keep it that way, you can still do that by enclosing their content into:

@media print {
    /* content here */
}