How to keep the CSS code clean

Post 160 of 262

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:

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}

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.

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;}

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:

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

#wpf-wrapper {
font-size:1.1em!important;
}

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.

, ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

3 comments:

HendroMarch 5, 2011 at 15:13Reply

smart idea to build css !

DarekApril 19, 2011 at 08:33Reply

If I may add something. This whole cleaning thing is pretty much useless in real world. I mean, it will work when you develop small website, but with bigger sites with lot of css it will simply not work.

Heres why:

1. Smaller code will load faster, but do you know how much faster? Well, not much and it’s not worth the effort. There’s a lot more thing you can improve to make your site load faster, but smaller css or js code is not one of them.

2. Well organized code will help you find bugs? It’s always good idea to keep your code clean, but with large css there is only one way to find what you are looking for, and that is by using firebug. It is almost impossible to find something in big css, but with firebug it’s quick.

I hope you are not one of these guys who can’t take criticism. I know you put a lot of heart in your websites, we all do. But I think you can optimize websites in a lot more productive ways than just minimizing your css file. You can use css sprites, and that alone will give you big speed bust. You can rent better hosting – again big difference. You can optimize graphics, php files (for better performance), mysql queries. That’s where real difference is.

Keep up good work Andreas, couse I can see you are one of these guys who care. And that’s the thing that WILL make a difference.

Meilyn WangDecember 28, 2013 at 12:33Reply

Your post is very important to me because with your article I learned to fix my css blog, I hope someday to see your real face .. lol
Thank you.

Menu