10 Terrific Time-Saving CSS Cleanup Tools

Peter North
Lead Design Writer at SitePoint

The benefits of having clean, organized CSS are numerous. A site with immaculate CSS will load more quickly, appear more prominently in search results, and serve as a stellar testament of your professionalism for future clients. Everyone from the everyday visitor to the most scrutinous fellow designer will benefit from your diligent, clean CSS markup.

But, cleaning up your CSS from countless design iterations and changes can be a tedious, time-consuming process. You likely don’t want to take on such tedium, and your clients likely don’t want to pay for a time-consuming tasks that offers such subtle benefits. From the designer’s perspective, manual CSS cleanup can be dreadful enough to crush creativity, take your focus off the higher-level thinking required by your work, and could potentially start making you like your profession less.

Luckily, there are some brilliant and helpful tools to help you automate some of the more mundane aspects of CSS and free your neurons up to tackle the more creative and enjoyable facets of web design. The following tools will leave you with an efficient, optimized, impeccably-organized CSS stylesheet that your web server, your current client, and your future prospects will greatly appreciate.


ProCSSor

aaprocssor

ProCSSor is a streamlined, no-nonsense tool for making instant improvements to your CSS. Available via OS X, iOS, or any browser, the tool takes a CSS file, a pasted snippet, or a URL and immediately beautifies, formats, and future-proofs your CSS.


CSS Lint

aacsslint

CSS Lint offers a more instructive experience compared to other CSS cleanup tools. Most don’t tell you much about the rationale behind the CSS changes that they make, but CSS Lint gives you a concise explanation for each of its recommended changes. It has quite a few features that focus on errors, compatibility, performance, duplication, and accessibility, all of which can be enabled or disabled at will.


Dirty Markup

aadirtymarkup

Dirty Markup has a unique approach to code optimization; it works as an aggregate and combines the power of several different code cleanup technologies (HTML Tidy, CSS Tidy, JS Beautify, Ace Editor) to give any provided code a comprehensive cleanup. As you might suspect, it works just as well on CSS as it does for JavaScript or standard HTML.


CleanCSS

aacleancss

CleanCSS accepts a URL or pasted code snippet and offers a wide variety of treatments. You can choose from between five different compressor settings that offer tradeoffs between readability and file size.


Code Beautifier

aacodebeautifier

Code Beautifier is a simple CSS cleanup tool with no frills or frivolous features. It accepts pasted or linked CSS, and carefully cleans it up based on a practical array of options. If you’re looking to remain focused on the project at hand and not get lost in an overwhelming sea of features, this might be your ideal CSS cleanup tool.


Spritemapper

aaspritemapper

None of the other mentioned tools delve into the area of image optimization, which can be just as beneficial as the optimization of the code itself. Spritemapper accepts multiple images from within a CSS stylesheet, merges them into a single one, and generates proper CSS positioning for the corresponding “sprites” or image slices of each. The result is a faster site, fewer HTTP requests, and a more streamline stylesheet.


Topcoat

aatopcoat

Topcoat isn’t a traditional CSS cleanup tool; it’s essentially a flexible framework for CSS development. If you start with compatible, well-written CSS, you’ll likely never have the need to clean up huge CSS messes. So, starting with Topcoat could be a more proactive, preventative approach to curating clean CSS.


CSSTidy

aacsstidy

CSSTidy is similar to several other CSS cleaning tools, but it does offer some unique attributes. CSSTidy can be called via command line or PHP, and it’s available on Windows, Mac, or Linux platforms. If you have a development system built on any of these technologies or manage a large number of projects simultaneously, CSSTidy is the cleanup tool that can fit perfectly within your existing workflow and keep your CSS clean autonomously.


Styleneat

aastyleneat

If you’re the meticulous type who still likes to tinker with your CSS or the cautious type who doesn’t want to put their trust completely in tools, Styleneat is likely the CSS cleanup tool for you. While it doesn’t offer minification or compression, Styleneat’s output is the most human-friendly, complete with reordered properties, sorted selectors, and indentations that make the stylesheet very clean from the human perspective.


W3C Validator

aaw3cvalidator

No collection of CSS tools is complete without mentioning the W3C Valdiator. While this doesn’t offer tools to streamline, compress, and optimize your code, it should certainly be considered where your CSS validity is concerned. While the other aforementioned tools have their merits, this one is backed by the W3C governing body.

What’s your CSS cleanup tool of choice? Do you have a favorite from the above, or perhaps one that wasn’t included?

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • SPandey

    Productive stuff! Beginner web developers can learn about CSS tools here. I am using CleanCSS since a long time.

  • Anonymous

    Great tools! I gonna use some of them.

  • Anonymous

    Couple of tools here I didn’t know about, thanks.

  • TomD

    I would have thought the main issue with CSS is identifying what is redundant and ideally removing it (optionally). I don’t think any of these tools do that. This sort of tidying could make a significant difference to performance. I imagine a large percentage of CSS downloaded is not needed at all, particularly with the popularity of Bootstrap etc. I don’t know of any tools which resolve this issue (at least not well).

  • Dean

    Thanks guys for this I had knowledge of some of these but not all of them. Good show matie.

  • howierd42

    Be careful with some of these. Dirty Markup truncated my CSS3 code without my realizing it and I had to rummage through old backups to repair the damage.

  • Matthew Setter

    A few good options here no matter what your background.

  • jim

    As with any tool where some of the action takes place out of plain view, caution must be taken to ensure the program’s “intelligence” doesn’t become malevolent! ;-) It brings to mind how Microslush Frontpage loves to re-write your code on the fly and tuck in all extra bloatcode when you’re not looking. LoL

  • raadmunir

    thanks for sharing awesome tools.

    http://ibiggboss7.com/

  • brothercake

    I’d also add the same note of caution here — tools like this can break CSS as easily as they can fix it.

    Just to take a quick example from the screenshots on this page — CSSTidy lists a feature that says “a{property:x;property:y;} becomes a{property:y;} (all duplicate properties are merged)”, but that will break the use of fallback properties, such as defining a hex color for fallback followed by an RGBA color for modern browsers (resulting in the fallback definition being lost).

    Personally, I would encourage developers to learn how to self-optimize — use shorthands where available, use the shortest form of color syntax that’s applicable to the situation, combine rules with the same properties but different selectors — things like that. The more practised and experienced a developer is, the less useful these kinds of tools become, until eventually they don’t do anything.

  • Anonymous

    I completely agree with brothercake. In fact its a pet peeve of mine when I see people who use short cakes such as these but also sprite creators and generators. You get better and become more skilled (and faster) when people don’t rely on such garbage. I’ve actually met designers who didn’t know how to create a sprite and couldn’t describe the process because they’ve relied on generators to do the work for them. How does this make the designer better? It doesn’t! It makes them look like a fool who will be unable to make future modifications to existing code. Nuts!

  • Arunpheo

    Great. Thanks for sharing

  • Torkild

    Agree with @brothercake and @lindanisbett but would not cast off tools like these.
    Whilst it is important to ‘know your stuff’ 100% tools like these are great for mundane repetitive cleanup tasks.
    Great article and thanks for sharing

  • Angus Grant

    Hi great list. Should you not have included the “css usage” add on for firebug. This has proven an indispensable tool to root out css that is no longer used on a given site. A problem that can occur with large bloated sites that have had a number of design revisions and have had multiple designers/developers working on them etc….

    • brothercake

      A much better tool for that is Dust-Me Selectors … although the problem with that is that it isn’t supported in the latest Firefox version (cos mozilla keep breaking it!). A new version is coming very soon though (or you can use FF21 just for that testing).

  • Anonymous

    or you can use a preprocessor and be done with it…