Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time. Browsers don't concern themselves with comments and indentation within your stylesheet files, so CSS files will load faster when the extra human bloat is removed, and there are several automated tools that can take your commented CSS and minify it before you put it into staging or production environments.

Minifying CSS has the same benefits as those for minifying JS:

• To reduce the network latency,


• To enhancing compression, and


• To faster browser loading and execution.

Guidelines:

• Remove redundant /inefficient CSS declarations


• Remove tabs, remove comments


• Remove unneeded ‘white space’ characters

Example:

            body
            {
            background-color:#d0e4fe;
            }

            h1
            {
            color:orange;
            text-align:center;
            }


        

After Minification:

            body
            {
            background-color:#d0e4fe;
            }

            h1
            {
            color:orange;
            text-align:center;
            }


        

The minified code is smaller in file size, and also has other enhancements added, particularly when using larger CSS files. Because your CSS code is smaller in size and more optimized, your pages will load faster

Tools:

Several tools are freely available to minify CSS Compressor and Google Minify