You can really optimize and streamline your CSS code with a great application called CSScomb.

It can also help identify errors, similar to the excellent CSS Lint which does error checking and style/selector suggestion. However where CSScomb comes into its own is the presentational and efficiency aspect of CSS style coding.

CSScomb features include

• sorting your CSS style declarations in a particular order
• formatting all aspects of code indentation
• formatting all aspects of code spacing
• removal of measures for unit less values
• removal of empty declarations

You configure how you want the CSS code to reformat to via a local template that is referenced during conversion. A great benefit here is you can share that template with others which is great when you are working in a team and want to adhere to a certain way of formatting your CSS code. Also just purely working alone, the tool just makes your code more optimal and which makes for faster page loading.

You can use CSScombs as a direct tool via the website, but its conversion style may not be to your taste, the real power is building your own template which you can use via the Terminal with easy commands and set the spacing and indentation just the way you prefer.

CSScomb Usage

Online

For online conversion, pop your code in the left and it spits out on the right. But it makes much more sense to go through the 24 steps to build your own style and set of rules by using the Build config option but to do so the app needs to be installed locally .

Locally via Terminal

Before you can run CSScomb locally you need to ensure that you have node.js installed, couple of resources here OSX 10.10, OSX 10.9, Linux.

Once node.js is installed, install CSScomb globally on your system:

npm install -g csscomb 

Then change directory to your project where your CSS files are stored and install CSScomb to that directory

npm install csscomb --save

This will save it in a directory in your project folder called node_modules

Create a template file named .csscomb.json still in the top level of your project

touch .csscomb.json

Configure the Template

Easiest way to build the template is to get back online to the Build Config menu and go through the 24 steps

Then you copy the config including the opening and closing braces and paste in your  .csscomb.json file.

 Running CSScomb in the Terminal

Still in your project folder to target a single CSS file:

csscomb MYCSSFILE.css

This will write the changes directly to the MYCSSFILE.css

Target all CSS files in the directory

csscomb *.css

More command line usage here.

CSS Style Declarations Sort

One of the things the online config does not do is sort all your CSS Style Declarations, you can do this manually or use some pre-built options, these are great just add them into the .csscomb.json file under the sort-order value. These pre-built options put them into line separated groups, if you want no separation just edit the file and remove the inner brackets and close the line spaces, also ensure you have  comma separated the line correctly or you will get an error if the format is wrong:

Configuration file /Users/you/cssnode/.csscomb.json was not found.

Plugins are also available including these workflows; Grunt, Gulp and Sublime.

It really is a great tool and worth getting up and running in your environment, once it’s configured it’s easy to use and you can move your .csscomb.json to other directories or users.