Grow your CSS skills. Land your dream job.

Clean Up Your CSS

Published by Chris Coyier

Cascading Style Sheets, at its root, is intended to separate the style of a webpage from the content. That makes sense for control reasons, but also for general code beautification. Just a little browsing through the CSS Zen Garden or some of the great articles on CSS design from Smashing Magazine and you can see the beautiful things CSS can do.

If the results of CSS are so beautiful, should the CSS itself be beautiful? Keeping your code pretty is just a matter of consistent tabbing, spacing, and syntax. You can keep up on that as you go along, but that just slows you down when you are just trying to throw in a quick fix or play around. Fortunately, there are some great tools out there for cleaning up your CSS for you.

Tabifier
Works for both HTML and CSS. Tabifier is dead simple, you just paste in the CSS, hit the Tabify button, and copy your code back out.

Pretty Printer
Pretty Printer is a more full featured beautifier that works for PHP, Java, C++, C, Perl, JavaScript, and CSS. There are a bunch of options for when to add new line breaks and when not to. Works pretty well. One problem is that the output code isn't in it's own box, so you can't Select All to grab it all at once easily.

Format CSS Online
More full featured beautifier for CSS exclusively. Has the ability to output as a file so you don't have to worry about copying and pasting at all.

CSS Formatter and Optimiser
Available in four languages: English, Deutsch, French, and Chinese.

Comments

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".