Making sure you have clean, organised CSS is very important if you want to please not only your web server, but your current client and any future design prospects. Websites with clean CSS markup will also load more quickly, meaning a better user experience for your visitors, and the potential for appearing higher in the search results.
You’re probably thinking that cleaning up your CSS from the many design iterations you’ve made will be a life-sucking, time-consuming process. And you’re probably right if you do a manual cleanup…
Luckily, there are some awesome tools out there to help you automate this process, and leave you with more time to do the fun, creative stuff! Do you dream of an impeccably optimised and diligently clean CSS stylesheet? Then you’re in the right place! Check out our top 5 time-saving CSS cleanup tools.
Dirty Markup is a web application to clean up your CSS. It combines the power of several technologies; HTML Tidy, CSS Tidy, JS Beautify, and Ace Editor to comprehensively clean up your code. All you need to do is stick in any piece of dirty code and Dirty Markup will tidy the lines and make them readable.
Code Beautifier is a simple open source CSS cleanup tool, perfect for those who want to concentrate on the task at hand rather than getting wrapped up in frivolous features. This tool simply accepts either your pasted CSS or CSS from a URL, and bases the cleanup on a practical array of options.
CSS Lint is different from other CSS cleanup tools in the sense that it is more instructive. While others don’t typically tell you much behind the changes they make, CSS Lint gives you a clear explanation alongside each of its recommended changes. This may be ideal for those slightly newer to CSS development. It also allows you the option of choosing which errors and warnings to test for.
Topcoat isn’t a traditional CSS cleanup tool, but is invaluable to have in your arsenal when it comes to time-saving. It is essentially a flexible framework for CSS development, but one which is designed for speed, and with the components allowing for a clean separation of resets. Topcoat is more of a preventative approach to CSS cleanup than a cleanup tool itself.
Spritemapper is a tool which merges multiple images into one and generates CSS positioning for the corresponding slices. This means fewer HTTP requests, resulting in a significantly improved loading time. The only tool here which mentions image optimisation, this can be just as beneficial as optimising the code itself.
There are many more CSS cleanup to choose from, as well as those to check the validity of you code, for example W3C CSS Validator. Some will be more appropriate than others depending on the purpose and your skill level. Some of you who are less tech savvy, or even with no CSS knowledge can really take advantage of of these tools to optimise your code.
Hopefully the tools mentioned here are enough for you to get going and start cleaning up your CSS stylesheet. If there are any not mentioned above which you have used or recommend then stick them in the comments below.