Introduction

Here are the steps to set up CSSComb, which is a formatter that will help you automatically format and order your CSS declarations. Letting you have clean and consistent CSS without much hassle.

Prerequisite

Installation of Node.js and NPM.

1. Install

Install CSSComb globally.

npm install csscomb -g

2. Generate the Config File

Now, we need to configure it. There are a couple of ways to set up a configuration file for CSScomb:

Grab a predefined config from their github.

Build your custom configurations on their official site here. Here are my custom settings:

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "vendor-prefix-align": true
}

3. Place the Config File

Put the generated or downloaded .csscomb.json file in your project root.

NOTE: If you want to use one config for several projects put the file inside a parent folder. CSScomb will look for a config file recursively up until it reaches your HOME directory. Or you can always set a custom path. In CLI:
csscomb -c path/to/config src/css

4. Usage

To run the CSScomb in the terminal, go to your project folder and target a single CSS file like such:

csscomb ./src/css/styles.css

To target all CSS files in the directory:

csscomb ./src/css/*.css