There are many ways to optimize your web pages. In addition to reducing HTTP requests and deliveringcompressedfiles, we can also minify code content. The easiest way to minify your CSS is to run it through an online code minifier, which automatically eliminates extraneous characters to reduce file size. Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads – it’s a “win-win” for everyone.

The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated code and then just dumping your hideous CSS into an automated minifier, it’s better to understand and practice as many micro-optimization tips as possible, given your particular coding style and specific project requirements.

I doubt that anyone is going to use all of the micro-optimization techniques presented in this article. If you did, your code would look like you ran it through a minifier, something like this:

That’s about as optimized as it gets, but you don’t want to work with code that looks like that. Fortunately, it’s not an “all-or-nothing” scenario. Think of micro-optimization as a hypothetical spectrum, with completely minified code at one end, and completely “un-minified” code at the other. As designers, we each place differently along the spectrum, with each person’s CSS reflecting their ability to write clean and well-optimized code. All of this of course is completely subjective – it’s up to you as a designer to develop your own coding strategy using as many (or as few) of these micro-optimization techniques as desired.

The goal of this article is to introduce you to the many different ways of micro-optimizing your stylesheets, enabling you to write leaner, cleaner CSS. While every technique is effective, not all of them are going to be practical during the development process. Use what works. Even if you ignore these techniques and just crank out your code through a minifier, this article will help you understand micro-optimization and how the process of minification works.

Tip #1: Use the shortest possible color values

For properties where color is used, use the shortest value possible. For example, let’s say you want a white background applied to the <article> element. You could write something like this:

Nice. But look at that background property – there is no need to write it all out like that. Instead, just use this:

article { background: #fff; }

So let’s compare the “before” and “after” for this example:

article { background-color: #ffffff; }
article { background: #fff; }

A significant improvement. Also note that certain color names are shorter than their hexadecimal representations. For example, writing “red” is more efficient than “#cc0000”.

Tip #2: Merge duplicate properties

After you have completed your stylesheet, take a moment to scan for duplicate properties and merge them. You could do this manually, or for longer stylesheets you can use an online CSS optimizer(404 link removed 2012/10/20) to automate the process. Either way, the goal is to reduce the amount of code used in your stylesheets by eliminating redundant properties, values, and declarations. As a simple example, let’s say you discover the following rulesets in different locations in your stylesheet:

Granted, duplicate properties are usually more subtle and complicated than this example, but the idea is clear: eliminate redundant properties by combining them into one. On the page, your design is going to look the same, but behind the scenes you’re delivering the stylesheet faster, using fewer resources.

Tip #3: Use shorthand syntax whenever possible

I bet some of you were virtually screaming during the previous example: “combine the properties using shorthand!!” And rightly so, but using CSS shorthand is important enough to warrant a tip all its own.

The idea with CSS shorthand syntax is that you can consolidate certain properties into a single declaration. Let’s return to the previous example:

That’s a lot of code, and if you’re writing everything out like that for other selectors as well, your stylesheet could quickly inflate with all sorts of bloat. Here is our ruleset after consolidating the declarations via shorthand:

p {
font: normal 1.33em/1.33 Georgia, serif;
}

Much, much better. There are actually quite a few properties that may be combined using shorthand syntax. Here are a few more examples:

Hopefully these are self-explanatory. If not, check out thesefinearticles. The goal here is to encourage you to use these shorthand rules.

Tip #4: Combine similar numerical values

Looking at the previous example, we see another case where micro-optimization is possible. Consider the following:

margin: 10px 20px 10px 20px;

For properties such as margin and padding that allow for multiple numerical values, we can save bytes by combining them:

margin: 10px 20px;

This rule is equivalent to the previous example, where 10px sets the margin for the top and bottom, and 20px sets it for the right and left. If all four sides were the same, we could simplify even further:

margin: 10px;

Keep an eye on this. There are numerous properties for which this shorthand may be applied. And it certainly helps shave off the weight.

Tip #5: Omit extraneous zeros

This one is subtle, but the savings can add up. When you write numerical values, do not include any extraneous zeros. For example:

padding: 0.1em;
margin: 10.0em;

You really don’t need those extra zeros, so wipe them out:

padding: .1em;
margin: 10em;

In the second line, we also killed the period, which is unnecessary for whole numbers. Remember, these are micro-optimization techniques, meant to provide cumulative savings on file-size, bandwidth, and server resources. Incremental changes produce an overall optimizing effect. Just sayin.

Tip #6: Omit units for zero-values

This is a no-brainer, but something that took me about a year to fully appreciate and embrace. Consider this:

padding: 0px;

Looks harmless enough, but there are two extra characters that don’t need to be there. When it comes to zero values, you don’t need to specify the unit. Zero somethings is still zero, nothing, nada. Just use zero and forget about it:

padding: 0;

Significant? Next time you’re digging around in your stylesheet, count up all the zero-values and multiple the total by two – that’s how many characters we are saving for each file load.

Tip #7: Omit the last semicolon

Did you know that the last semicolon in every ruleset can be omitted? It’s true, there is no need to include it. Let’s return to our paragraph example:

To me, it still looks weird not including the semicolon, and in fact, most of the designers I study do in fact include the last semicolon pretty much for every ruleset. Would love to hear your opinion on this.

Tip #8: Remove comments from production files

Yes, CSS comments are essential to maintaining a clean and well-organized stylesheet, but they are 100% useless to browsers. So why include them in your production files? To the browser, all of those carefully placed comments are literally completely ignored, even though they continue to consume valuable server resources, bandwidth, and download time. So get rid of ‘em!!!

If this sounds like blasphemy to you, relax. I explain how to enjoy the best of both worlds at the end of this article.

Tip #9: Remove unnecessary whitespace

Remove as much whitespace as possible. Except for a few shorthand cases, it’s simply not necessary and bloats your code by as much as 50% or more. Let’s look at an example. Here we have a typically styled body selector:

13 spaces and 8 line breaks were removed from this ruleset. Seem pointless? Consider this: if we have 50 (a modest number) selectors in our stylesheet, each averaging 10 spaces, we have over 500 characters that can be removed. That’s over 500 bytes per file load, which is cumulatively significant for sites with any considerable amount of traffic.

Note that there are property values that must include whitespace in order to operate. Properties condensed into shorthand notation are a good example, as seen here:

p {
font:normal 1.33em/1.33 Georgia,serif;
}

See how the whitespace is used to differentiate between the different values? Whitespace can be removed from between the property-name and the first proerty-value, but it needs to be there between the values themsleves. Here is what it would look like if we removed all of the whitespace:

p {
font:normal1.33em/1.33Georgia,serif;
}

Obviously, this isn’t going to make any sense to the browser, and the rule will be ignored (although IE may do something with it).

And of course, all of this brings us to our next and final micro-optimization tip:

See, no crazy folding shenaniganz. Pretty boring, but damn efficient. I first began using this technique after working with CSS-Guru Chris Coyier on the Digging into WordPress site. He writes everything in single-line format, so I gave it a shot – and liked it. There is a certain practical elegance to single-line CSS, and it involves much less scrolling, which is in itself a great way to optimize not just site performance, but your performance.

Bottom line: tabs and spaces consume bandwidth – design accordingly. A good way to go about it is to create two versions of your stylesheet: one for careful development and another optimized for production. More on this here.

Tip #11: Validate your CSS!

Once you get everything looking good, take a moment to run your stylesheet through an online CSS validator. It’s fast, free, informative, and is a great way to catch anything that you may have missed. I am always surprised to see some of the mistakes that I have made in my own stylesheets – some subtle, some blatantly obvious.

Bonus Tips: Other Ideas

A couple other ideas occurred to me while writing this post. First, one thing that most designers and CSS optimizers seem to miss is the blank space after selector names. For example, this:

a:link, a:visited {}

..could be written this way:

a:link,a:visited{}

Those extra spaces are useless to the browser, so feel free to remove them to save some a few more bytes.

The second thing that is pretty uncommon is removal of line breaks between rulesets. Consider the following code:

h1{color:#111}
h2{color:#333}
h3{color:#777}

About as optimized as is usually seen around the Web, but we can go even further by removing the line breaks after each ruleset:

h1{color:#111}h2{color:#333}h3{color:#777}

Almost ridiculous, this level of minification is probably best implemented after development. Otherwise you would be scrolling sideways along an seemingly endless string of code. If you can find (or configure) a minifier that will do this for you, it may further reduce file size.

It’s all about teh micro-optimization

Individually, each of these optimization tips may seem like small potatoes. But when you’re talking about 10, 20, or more instances of each optimization technique in a single stylesheet, it adds up in a hurry. Then multiply the savings of a single file by the total number of times it will be delivered. Doing the math, you’re going to see that these “micro-optimization” techniques are extremely beneficial in terms of download speed, bandwidth savings, and server resources. It may be difficult to just suddenly start writing well-optimized code, but by gradually integrating some of these techniques into your own practice, eventually you’ll be producing some high-octane, well-optimized CSS.

The bottom line is that you should be optimizing your production stylesheets. There are always cases where you want to leave the code formatted and human-readable, but for 99% of production sites, you are better off delivering the most bandwidth-friendly files possible. Machines don’t care how pretty your code is – just ask Google about that.

The easy way to do all of this

Writing clean and well-organized stylesheets often goes against most of everything we’ve discussed here. But it doesn’t have to. Eventually, I would like to get to the point where I can write well-organized and well-optimized CSS the first time around, without needing to edit or change anything later. Imagine just being able to write a production-ready stylesheet in Notepad. Bam! You’re done.

Unfortunately, all of those comments, whitespaces, and semicolons help us to produce stylesheets that are clean, organized, and manageable. And that’s perfectly fine. Adopt as many micro-optimization techniques as you want, and then continue to write your code with as much fluff as needed to make it understandable and maintainable. Then, once you have your development stylesheet ready to go, run it through a good CSS optimizer to optimize it for the production environment. Just keep your elaborately formatted stylesheet as-is, and then crank out an optimized production version to use on the “live” site. It’s like getting the best of both worlds!

Check it out

Comments

Jeff: I love your code block expansion trick. Is that a freely avaialble plugin or did you write it yourself?

There are some times when css optimization won’t work, especially when you’re relying on specificity to override inheritance. One must be careful when using shorthand properties like “background” and “font” because they tend to set properties in an all-or-nothing manner.

Usually you could set the overall background:[selector] {background: #fff url('/path/to/image") top left fixed;}

but when you need to alter a specific property for a specific instance, refer to the property directly:[selector] {background-color: #c00;}

This preserves the remaining properties. background: #c00; is not guaranteed to work as well.

I hate looking at tabbed, multi-line CSS. Some consider it more readable, but I have to keep looking down for the next property it gets pretty annoying.

Single-line CSS as well as most of your micro-optimization techniques is definitely better that everyone should get used to. You can argue about later putting your CSS in a compressor, but I personally save way more time already writing optimized code so I can always change things later without it being a huge process.

nice run down. i write my css like that, no compressor needed. it just takes time to get used to.
one thing, regarding background-color; i want to say that the marvelificient IE6 doesn’t recognize background:#fff, and you have to say -color; but i’m not remembering my source. and i’m not saying that you’re wrong. nice run down.

ah. thx sunny, now i remember. it all depends on what you have going on in your styles and the cascade, but just declaring background:#fff should reset the rest of your background declarations, so if that is your aim, then its kewl. if not, i hold back on it.

@Tony: Here is how to make the auto-expanding code box, by Chris Coyier at Digging into WordPress. Also, I am hearing a lot in this thread about using background-color instead of just background, but I have never experienced any issues with it. Which browsers have issues?

@Buda: Absolutely agree – I use that technique mixed in with my other fold-coding formatting techniques. It’s perfect for certain selectors and sub-selectors.

@Benjamin: Interesting, I haven’t heard anything about it until now. It sounds like a bad idea to me, but who am I to argue with the W3C? Honestly I doubt they would do something like that..

@Sunny: Makes complete sense, and sounds like you have your CSS well under control! Learning how to write clean, optimized code without relying on an automated minifier takes practice, but is worth the effort.

@chris: My pleasure – thanks for the feedback :)

@albert: I haven’t experienced that, or perhaps I have forgotten since I pretty much stopped supporting IE6. If you have a reference, that would help sort it out. Thanks!

Good tips. I’ve been using most of these techniques for a while during the development phase, no need to compress the CSS before deploying unless you really need to optimize download speed (mobile, high traffic).

Books

Links

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience. Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and now features over 700 articles and more than 11,000 comments. More stats »