Minifying CSS

The following article discusses the topic of compressing a CSS file, minifying a CSS file and unifying multiple CSS files. Compacting a CSS file can help with the performance of your web page because it basically reduces the overall size of the file that is being loaded. File reduction is normally done by removing unnecessary elements in the CSS file such as extra spaces, comments, line breaks, and indentation. Fortunately there are many tools available for compressing/minifying CSS that can help you with this task. We will list these options below.

Why should you compress a CSS file?

You should compress or minify a CSS file because it will load faster thus making your web page load faster. Cascading Style Sheets (CSS) are used to provide formatting in website pages, but they can be implemented in many different ways. Often, these files include text or spaces that are not necessary for the formatting of the website. The unfortunate byproduct of these additions to a CSS file is the increase in the file size of that CSS file. This increased file size can lead to a decreased performance of a web page. We are not saying that the documentation should not be there, but by removing the documentation you may improve the performance of the web page because you are making the CSS file smaller.

Multiple CSS files

CSS code can also be saved into multiple files. Keep in mind that each CSS file must be loaded before the page can be displayed in an internet browser. This causes an increase in the time to load the page. If possible, it’s best to unify multiple CSS files into a single CSS file. This keeps the web browser from having to go through multiple CSS files.

Inline CSS

You will often also see CSS directly in a HTML document. This is known as inline CSS. Basically, you’re simply putting CSS code directly in the same document as your HTML. Inline CSS commands improve on performance because they do not load a CSS file. However, you should only use inline CSS commands when the CSS code is minimal. If you find yourself having to include several lines of CSS code in your HTML document in order to format the web page, then the CSS code should be in a central CSS file.

How to compress a CSS file

As per the example below, you can manually go through a CSS file in order to remove unnecessary elements. You compress a CSS file by removing unnecessary spaces, comments, or other unnecessary indents to reduce the file size. You can also use an online tool to compress large CSS files.

Example of CSS code with documentation

    body {         /* Background color of the screen is WHITE */        background: white;              /*This section determines the color of URLs on the page depending on their status */        a:link { color: #0000ff }       a:visited { color: ##800080 }       a:active { color: ##008000 }             /* Font size is extra large and is colored  */       h2 {font-size: x-large           color: blue;        }

NOTE: This is a very simple example of CSS code. Typically, if you have a large file of CSS code and it’s full of unnecessary text, then you should take the time to compress it. Here’s the same code with the documentation and spaces removed:

  body {       background: white;       a:link { color: #0000ff }       a:visited { color: ##800080 }       a:active { color: ##008000 }       h2 {font-size: x-large       color: blue;       }

The remaining code above can be minified even further by removing line breaks and spaces. Eventually it would look like the following:

 body{background:#fff;a:link{color:#00f}a:visited{color:##800080}a:active{color:##008000}h2{font-size:x-large color:#00f}

As you can see, it becomes a lot harder to read in this form, but its compacted size makes the file quicker to load. To make it easy for further development or refinement, it’s always a good practice to keep a copy of the CSS file in an uncompressed state.

Tools for Minifying your CSS

There are also many free tools that you can use to compress a CSS file. Some of them are online, while others, such as the Yahoo YUI Compressor, can be downloaded and installed on your computer for use. To find these tools, search for “minify CSS” in your favorite search engine. Here’s a short list of what you may find:

• CSS Minifier
• Online version of the YUI Compressor for CSS/Javascript
• Download version of the YUI Compressor. For documentation on this tool, please go here.
• CSS Compressor

There are many more options that you can choose to compress your CSS code. However, to help determine or grade your code to see if it requires minifying, check out this tool from Google: CSS Delivery Tool. You can use it to check and see if your code needs optimization. Also, after you have finished compressing the CSS file, you can use the tool to see if it helped! While you’re on the page for the CSS delivery tool, make sure to review the Google Guidelines, Pagespeed, and the other free tools that Google provides for website development.