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.
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
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
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:
This will write the changes directly to the MYCSSFILE.css
Target all CSS files in the directory
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.
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.