Mar 3 2011

How to keep the CSS code clean

When I work with HTML, CSS, PHP or any other code or scripting language, I always try to keep the code in order to make sure it will remain easy to get into for future updates. Well-structured code makes it easier to spot errors, and also easier to get an idea of what the design will look like in the browser. I tend to stick to a common formatting that I think works well for me, and it is the one I use in my website templates. But during the building and editing process it can be hard to keep the details in order. That is why I usually run the finished code through a tool that formats it in a good way before I publish a new template. My favorite tool for organizing the CSS is CSS Tidy. In this post, I will explain how I use CSS Tidy to format my CSS.

Step 1: Copy the CSS from the stylesheet file

For this example, I will use a part of the CSS from this site. The CSS output of andreasviklund.com is minimized to remove unnecessary whitespace. It reduces the load time, but it makes code very hard to read. Here is the code I will want to clean:

[css] input{width:80px !important;font-family:Verdana,Tahoma,sans-serif;margin-left:5px;font-size:0.9em}
#wpf-wrapper{font-size:1.1em !important}#shareicons{margin-bottom:18px;text-align:left}#shareicons
a{width:48px;height:48px;margin:0 12px;border:0;opacity:50%}#shareicons a:hover{border:0;
opacity:100%}div.wpcf7{margin:0;padding:0}div.wpcf7-response-output{margin:2em 0.5em 1em;
padding:0.2em 1em}div.wpcf7-mail-sent-ok{border:2px solid #398f14}div.wpcf7-mail-sent-ng{border:
2px solid #f00}div.wpcf7-spam-blocked{border:2px solid #ffa500}div.wpcf7-validation-errors
{border:2px solid #f7e700}span.wpcf7-form-control-wrap{position:relative}
[/css]

That looks like a mess, really.

Step 2: Paste the code into CSS Tidy

Go to CSS Tidy and paste the copied code into the “CSS Input” field. You can also use an URL to a CSS file hosted online instead of copying the code.

Step 3: Select format and settings

In the “Code layout” field, there are a couple of different settings for the code output, called “Compression”. It defines what the output will look like, and higher compression means a smaller file with a reduced readability. The code above is similar to the highest compression. I select “High” as my starting point in this example.

As for settings, there are several options for how the code you have entered will be handled. You can choose to sort selectors (which is not recommended), sort properties, convert the code to shorthand format – for example get CSS Tidy to output “margin:10px auto;” if you have written “margin-top:20px; margin-right:auto; margin-bottom:20px; margin-left:auto;”. This is a screenshot of the settings I use:

Step 4: Process the CSS

With the CSS in place, the format selected and the settings entered, it is time to press the “Process CSS” button. CSS Tidy then cleans the code, and tells you what optimizations that have been made. In this case, the following things were changed or commented:

1. Optimised number: Changed “0.9em” to “.9em”
2. Invalid property in CSS2.1: opacity
3. Invalid property in CSS2.1: opacity
4. Optimised number: Changed “0.5em” to “.5em”
5. Optimised number: Changed “0.2em” to “.2em”
6. Optimised color: Changed “#f00″ to “red”
7. Optimised color: Changed “#ffa500″ to “orange”

Review the result

This is the final result after processing, and now the format looks much more familiar. And much easier to read.

[css] input{font-family:Verdana,Tahoma,sans-serif;font-size:.9em;margin-left:5px;width:80px!important;}
#wpf-wrapper{font-size:1.1em!important;}
#shareicons{margin-bottom:18px;text-align:left;}
#shareicons
a{border:0;height:48px;margin:0 12px;opacity:50%;width:48px;}
#shareicons a:hover{border:0;opacity:100%;}
div.wpcf7{margin:0;padding:0;}
div.wpcf7-response-output{margin:2em .5em 1em;padding:.2em 1em;}
div.wpcf7-mail-sent-ok{border:2px solid #398f14;}
div.wpcf7-mail-sent-ng{border:2px solid red;}
div.wpcf7-spam-blocked{border:2px solid orange;}
div.wpcf7-validation-errors{border:2px solid #f7e700;}
span.wpcf7-form-control-wrap{position:relative;}
[/css]

Remember to always double-check the processed code to make sure it works as the original code, and always keep backups of older versions.

Other formats for higher readability

Make sure to try the other format options as well, they may suit you better. This is an example of the “Standard” layout:

[css] input {
font-family:Verdana,Tahoma,sans-serif;
font-size:.9em;
margin-left:5px;
width:80px!important;
}

#wpf-wrapper {
font-size:1.1em!important;
}
[/css]

That is a quite common way to make the CSS even easier to work with. I prefer to keep it more compact to avoid scrolling, but it is a matter of taste and personal preference.

Final words about CSS Tidy

I like this tool, and I like the fact that it is not just available through the link above. You can also download the script and host it on your own server, or even build it into your website scripts to automatically format the CSS output at runtime. You can also create your own format styles if you want a specific format for the output. For more information, see the CSS Tidy website (which happens to be built using the andreas01 template, by the way!).

Also keep in mind that CSS Tidy is NOT a validator, only a formatting tool. To make sure that your code validates, always run it through a CSS validator as well.