10 Free Tools for Formatting, Organizing and Tidying CSS Code

If you are an uber-experienced web designer, you probably won’t have this problem. Your CSS files will be structured coherently and concisely; every selector will have been attentively placed, every property will be perfectly formatted… your CSS will look like carefully crafted art. If this describes you, then move along please, this post is not for you.

But if you are one of the 99.9% of web designers out there that work with CSS on a regular basis, it is for you.

You know how it goes, you start a new web project with a barebones CSS file, and as you build the site, your CSS grows rapidly with it. And it will keep on growing. It will become disorganized. The structure and at times it will be confusing and even unreadable. Structure will ultimately be lost. Mistakes will have been made. Rest assured though; it happens to everybody.

At this point you can either do one of two things, stop at different stages and re-structure the CSS, or you can wait until the site is finished and then fix everything. Either way and depending on the size of the site, it will take a lot of your time.

If only there were a bunch of tools that would help format, organize and sort my CSS for me. Thankfully, there is. Now, these tools are not fool-proof. They won’t know about the unique and quirky style you use for writing your CSS, but they will help and will save you a lot of time. Time back that will let you go and mess up another CSS file!

You may also like these toolboxes: CSS Flexbox, CSS Animation, SVG Workflow Tools or Styleguide Tools.

CSS Comb – CSS Sorting

CSScomb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, sort them in a specific order.

Unused CSS

Unused CSS is a simple tool that scans your website for any unused CSS selectors.

Purgecss

Purgecss is a tool that can quickly remove unused CSS from your site.

Sanitize CSS

sanitize.css is a CSS library that corrects broken and missing styles.

Mort

Mort is a simple tool for detecting and highlighting “dead” CSS.

CSS Shrink

CSS Shrink is a small tool for ‘shrinking’ CSS files.

csscss -A CSS Redundancy Analyze

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

Helium CSS – JS Tool To Scan Your Site and Show Unused CSS

Helium CSS is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages.

It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO can also perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers.

It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSS Lint- Helps Find Issues With Your CSS Code

CSS Lint is a tool that helps point out problems within your CSS code.

It does basic syntax checking as well as applying a set of rules to the code that looks for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

extractCSS

extractCSS is a tool that can extract ids & classes from HTML documents and output a CSS stylesheet.

Alternative Optimizers, Formatters & Validators:

• Online JavaScript/CSS Compression Using YUI Compressor
• PrimerCSS – Undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet
• Compressor – CSS Compression Tool
• The W3C CSS Validation Service
• CSS Validator from CSS Portal