You must configure CSScomb before use. There are a number of ways how you can do it.
There are several config files included in this project you can use right away:
csscomb
zen
yandex
In CLI, csscomb
is a default config file that is used unless you provide your
own.
In Node.js, you can pass config's name to constructor:
var Comb = require('csscomb');
var comb = new Comb('yandex');
Feel free to use predefined configs as examples: copy one of them and modify to
your taste.
Just remember to save the file as .csscomb.json
in project's root.
You can easily write your own configuration. The only requirement is that config is valid JSON in order to work correctly.
Here is an example:
{
"exclude": ["node_modules/**"],
"verbose": true,
"always-semicolon": true,
"color-case": "lower",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"remove-empty-rulesets": true,
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true
}
Take a look at available options and choose those you need. You can use our visual config builder to choose most options.
CSScomb will look for a file named .csscomb.json
.
The best way is to put the file in your project's root.
However, if you want to use one config for several projects, it's fine to put
the file inside a parent folder.
CSScomb will look for a config file recursively up untill it reaches your
HOME
directory.
Remember that you can always set custom path. In CLI:
csscomb -c path/to/config assets/css
In Node.js:
var Comb = require('csscomb');
var config = require('path/to/config');
var comb = new Comb(config);
Instead of configuring all the options one by one, you can use a template file:
CSScomb will detect the coding style and use it as a config.
All existing properties except sort-order
can be configured this way:
csscomb -d example.css > .csscomb.json
This will create .csscomb.json
based on options that can be detected in
example.css
file.
Let's say your template file has following content:
.foo
{
width: #fff;
}
Generated config wiil then look this way:
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"color-shorthand": true,
"strip-spaces": true,
"eof-newline": true
}
You can use template inside existing config and then complete it or override some of detected settings:
{
"template": "example.css",
"leading-zero": false,
"vendor-prefix-align": true
}
This config will:
- detect all the options from the
example.css
, - then use
"leading-zero": false
instead of anything detected, - then use
"vendor-prefix-align": true
even if there were no prefixed properties or values inside theexample.css
.