How to Optimize CSS Code

As CSS becomes a driver of new technologies in web design, a whole host of wizards and accessories have emerged to handle CSS coding. CSS optimizers work to trim down your CSS code and reduce page load times. Many designers use CSS optimizers, but the jury's still out on which methods work best to standardize and optimize the style codes as they are written.

Difficulty: Moderately Challenging

Instructions

1. Look at available CSS optimizers online. Different optimizers work in different ways, maybe focusing on different CSS standards. An optimizer might focus on color and style definitions, for example, and re-format a few words or characters to enhance your code or cut out waste.

2. Run your CSS code through the optimizer.

3. Take a good hard look at the code and what the optimizer has done to it. How did it change? Are the changes ones that you prefer, or do you think the program messed up your code?

4. Make some basic lists of what you thought the program changed for the better, and what, if anything, you think was changed in error. This will help you use the optimizer for its strengths in the future.

5. Go over the code again and hand-code changes you think are necessary. This combination of software use and common sense should help you craft your CSS code into something shorter and better.

Tips & Warnings

• The W3, a worldwide consortium who help to define code standards, have a CSS validation site. Simply locate the validator on the web site, upload your CSS pages, and look at how the W3 would change your code. This may be preferable to using an independent optimizer.
• Another choice is to use high-end optimizers to truncate your code further: but beware trying to work with these and hand-code further changes. Some optimizers make CSS code nearly illegible in the end. If you want a quick optimization without your own input, just let the software define the end product and forget combing through it yourself.

Resources

• W3 website which has CSS resources.
• A CSS optimizer.
• Includes information on CSS optimization.