CSSComb is a Node.js/io.js based tool for organizing and ordering CSS rules according to a given configuration. It can enforce specific orders of layout and coloring, as defined in SMACSS.
Configuration is managed via the .csscomb.json file, written in JSON format. A standout feature of the command line tool is its ability to generate the configuration file by analyzing an existing CSS file via detection.
To install with npm[], execute:
npm install --global csscombGiven the example CSS below, use this command to generate the configuration file:
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.jsonThe resulting configuration file might look like this:
{
"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 includes plugins for various code editors to enforce order automatically when editing CSS files:
- Atom has “atom-css-comb”
- Brackets features the “CSScomb Brackets plugin”
- Sublime Text supports “CSScomb”
- NotePad++ lacks a dedicated plugin currently.
Refer to this post on EditorConfig for installation instructions on these plugins, as they share similar functionality.
Editor-specific shortcut keys for executing the plugins include:
- Atom:
ctrl + alt + c - Brackets:
cmd + alt + c - Sublime Text:
ctrl + shift + c
Furthermore, task runners like Gulp and Grunt are available to integrate CSSComb into build processes.
Once the configuration is tailored, especially specifying sort order, CSSComb proves beneficial for maintaining consistency in both new and existing CSS content.