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… basically, 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 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 up a lot of your time.

If only there was 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!

CSS Comb – Tool for sorting CSS properties in a specific order

Usually to re-order CSS code you move lines over each other taking comments into consideration, multilines records of property values, hacks and everything that could be found in the real file. CSScomb reproduces those actions for you. It is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.

CSS CombCSS Comb Online

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.

csscssGitHub

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

Helium 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.

Helium CSS

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO also can 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

CSSOGitHub

CSS Beautifier – Beautifies Your CSS Automatically

CSS Beautifier is a handy tool that will take any messy CSS file and make it easy to read. Here is what it will do for you:

CSS Beautifier will take the following CSS…

menu{color:red} navigation{background-color:#333}

…and will produce:

menu {
    color: red
}

navigation {
    background-color: #333
}

CSS BeautifierGitHub

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.

CSS LintGitHub

Minify and GZip Compress JavaScript & CSS

Minify and GZip Compress JavaScript & CSS

Devilo.us – Compress and Tidy Up Your CSS

Based on CSSTidy, Devilo.us is an advanced CSS compression and optimization engine that has been modified to also handle CSS3.

Devilo.us

Alternative Optimizers, Formatters & Validators:

• ProCSSor – Advanced CSS Prettifier
• Clean CSS – A Powerful CSS Optimizer and Formatter
• 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

You might also like…

15 Responsive CSS Frameworks Worth Considering →
15 More Responsive CSS Frameworks & Boilerplates Worth Considering →
10 Lightweight & Minimal Responsive Grid Frameworks →
10 Free Pure CSS UI Kits →
10 Responsive Navigation Solutions and Tutorials →

Or, you may like to browse our CSS category.

Speckyboy Design Magazine