CSS Compression and Techniques

Learning to write clean, optimized CSS requires lots of practice and an unstoppable compulsive desire for neatness. Keeping your CSS trim and tidy isn’t all about feeding your crazy psychological need for cleanliness though, in the case of particularly large websites, the payoff is faster loading pages. Faster loading times equals increased usability and higher user satisfaction.

This post will examine several techniques you can use to optimize your CSS as well as several online tools that can automatically compress your code.

To Compress or Not to Compress

Before we get into how to compress your CSS, it should be noted that there is often a tradeoff between compressed and easy-to-read code. Many coders take pride in the organization evident in their CSS and wouldn’t dream of putting it through compressors that strip away comments and line breaks. As a web designer, you should analyze your goals for the code that you write. If you’re creating a small website that only requires a few lines of CSS, there may be no need for extra compression. Also, if you’re writing code that you have to share with a team of programmers, inserting extra comments and line breaks can save your colleagues a lot of time and garner some serious gratitude. However, if you’re designing a large website that requires tons of CSS, you definitely want to keep an eye on your file size and do what you can to keep it down.

It might take a while to find the perfect mix between compression and readability but both are worth pursuing and achieving that balance can make your job a lot easier. Also, it’s definitely not the case that compression always results in a reduction of readability. Many techniques you can use to compress your code will result in better, more organized code.

With that in mind, let’s jump into some techniques for keeping your CSS file size to a minimum.

Empty Style Blocks

Let’s start with the obvious. If you’ve got a style block with nothing in it, toss it. Don’t whine about how you might use them later either, they’re just clutter and you know it. Don’t add it unless you’ve got a reason to.


CSS Shorthand is a method of combining multiple lines of CSS into a single command. Making a habit of using all the shorthand tricks you are aware of can drastically reduce the lines of code you write in the long run. Here’s an example:

Long Version:

#container {
     padding-top: 5px
     padding-right: 10px
     padding-bottom: 30px
     padding-left: 18px

Shorthand version:

#container {
     padding: 5px 10px 30px 18px;

For more CSS shorthand tricks, visit the article below.

CSS Sprites

The basic idea behind CSS sprites is reducing the number of HTTP requests to speed page load times. How sprites accomplish this feat is by combining multiple images into a single image, commonly in a grid format. Each individual image is displayed by shifting the background-position of the larger image. For a more detailed look at CSS Sprites, check out Chris Coyier’s tutorial over at CSS-Tricks:

Comment Reduction

I love to fill my code with comments. The more comments I put it, the faster I can visually sort through the different sections of code. However, if you’re going for highly optimized CSS with a small footprint, excessive comments can eat up precious KBs. Try eliminating any unnecessary comments and reformatting those you absolutely must keep to as few characters as possible.

Reasonable Font-Families

When file size is a big issue, don’t pack your font-famlies to the max with alternatives. Cut out all the unnecessary fat and trim your extra options down to one or two.


#container {font-family: Palatino, Georgia, Times, serif;}


#container {font-family: Palatino, serif;}

Use Hex Colors

To cut down on characters, convert any RGB values to their hexadecimal equivalents. This may seem trivial, but every character counts!


#container {color: rgb(131, 100, 219);}


#container {color: #8364DB;}

Eliminate Line Breaks

Go through each style block and remove unnecessary hard returns. You can also ditch the last semicolon


#container {
     margin: 5px;
     padding: 5px 10px 30px 18px;


#container {margin: 5px; padding: 5px 10px 30px 18px}

10 Online CSS Compressors

CSS compressors automate much of the work of cleaning up your code. Many of them give you the percentage by which your file size has been reduced so be sure to try a few to see which one is best.

CSS Drive


Compression Mode: Light, Normal or Super Compact

Comment Stripping: None, all, or those longer than a specified length

CSS Compressor

Options (Choose Yes or No for Each):

Sort Properties

Compress Colors

Compress Font-weight

Lowercase Selectors

Remove Unnecessary Backlashes

Remove Unnecessary semi-colons


Options (Choose Yes or No for Each):

Strip Comments

Strip Comments at Least x Characters Long

One Rule Per Line

CSS Optimizer


Do Not Remove Line Breaks (Yes or No)

Get CSS from URL, File, or Pasted Text

Lottery Post

Options: None

Clean CSS

Options (Choose Yes or No for Each):

Sort Selectors

Sort Properties

Optimize Selectors and Their Properties (0, 1 or 2)

Merge Shorthand Properties

Only Safe Optimisations

Compress Colors

Compress Font-weight

Lowercase selectors

Case for Properties (Lowercase of UpperCase)

Remove Unnecessary Backslashes

Convert !important-hack

Remove Last ;

Save Comments

Discard Invalid Properties (CSS2.1, CSS2.0 or CSS1.0)

Output As File


Options (Choose Yes or No for Each):

Convert long colours names to hex

Convert long hex codes to short hex codes

Convert long hex to colour names

Convert RGB to hex

Remove zero measurements

Combine identical rules

Combine identical selectors

Combine properties

Remove overwritten properties

Remove useless values from margins and padding

Show statistics

Output in colour

Output using smallest size

PHP Insider

Options: None



Break Options: 500, 1000, 1500 or 2000

Page Column

Options: None


Despite the horribly ugly website, GZIP is an incredibly useful tool for compressing many types of code. It’s not the easiest compression method to figure out though and may be confusing to beginners. Check out this tutorial for more information on GZIPPING your CSS.

No comments:

Post a Comment