CSSComb is a Node.js/io.js based tool for organising and ordering CSS rules according to a given configuration. It can be used to enforce certain order of layout and colouring, such as defined in SMACSS.
The configuration can be done via .csscomb.json file which is written in a JSON format. One of the best features of the CSSComb command line tool is that it can generate the configuration file by reading an existing CSS file.
The command line tool can be installed with npm:
npm install --global csscomb
Given the example CSS below, the configuration file can be generated with the command that follows the CSS example.
pre {
background-color: #f5f2f0;
padding: 1em;
}
code {
background-color: #f5f2f0;
padding: 0.1em 0.3em;
display: inline-block;
font-size: 93%;
color: #000;
white-space: pre-wrap;
word-wrap: break-word;
}
.top-area {
min-height: 130px;
height: 130px;
margin: 0;
background-color: #1c77ed;
}
.top-area > address {
width: 130px;
height: 100%;
}
.top-image {
width: 120px;
height: 120px;
margin: 5px;
}
csscomb --detect styles.css > .csscomb.json
The contents of the resulting configuration file would look something like:
{
"always-semicolon": true,
"block-indent": " ",
"color-case": "lower",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": false,
"leading-zero": true,
"remove-empty-rulesets": true,
"space-after-colon": " ",
"space-after-combinator": " ",
"space-after-opening-brace": "\n",
"space-before-closing-brace": "\n",
"space-before-colon": "",
"space-before-combinator": " ",
"space-before-opening-brace": " ",
"strip-spaces": true,
"unitless-zero": true
}
CSSComb has plugins for several code editors, so that when a given CSS file is being edited, the order will be enforced automatically.
- Atom has "atom-css-comb"
- Brackets has "CSScomb Brackets plugin"
- Sublime Text has "CSScomb"
- NotePad++ does not have a plugin at the moment.
For installation of the plugin, please follow the instructions given at another post regarding EditorConfig, which has very similar use case.
As for executing the plugin, in different editors, different shortcut key combinations can be used, which can be configured to be something else than the defaults shown below:
- Atom:
ctrl + alt + c - Brackets:
cmd + alt + c - Sublime Text:
ctrl + shift + c
In addition to the command line tool and the code editor plugins, there are also task runners available, for example to be used with Gulp and Grunt.
Once the configuration is adjusted and specifically the sort order gets specified, the tool becomes useful for keeping existing and new CSS content in order.