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.
Shorthand
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.
Before:
#container {font-family: Palatino, Georgia, Times, serif;}
After:
#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!
Before:
#container {color: rgb(131, 100, 219);}
After:
#container {color: #8364DB;}
Eliminate Line Breaks
Go through each style block and remove unnecessary hard returns. You can also ditch the last semicolon
Before:
#container {
margin: 5px;
padding: 5px 10px 30px 18px;
}
After:
#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
Options:
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
Arantius
Options (Choose Yes or No for Each):
Strip Comments
Strip Comments at Least x Characters Long
One Rule Per Line
CSS Optimizer
Options:
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
Pingates
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
SevenForty
Options:
Break Options: 500, 1000, 1500 or 2000
Page Column
Options: None
GZIP
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.
View Demo Overview
