What is Recess?

 
Recess is a simple code quality tool developed by Twitter, built on top of LESS. Recess can be incorporated into your development process as a linter or can be directly integrated into your build system as a compiler. It will enable you to have a clean and manageable source code.

This tutorial covers the installation and management of recess on a VPS running Ubuntu 12.04. For that, you should already have your virtual private server, Node.js and node packaged modules (NPM) installed.
 

Installation of Recess

 
Once you have your Node.js and NPM installed on your virtual private server, you can install Recess by issuing the following command on your terminal.

npm install recess -g

Features of Recess – What It Does

 
Recess has a built in configuration for some of the standard rules for writing CSS. If you do not wish to abide by the rules, you may disable those individually. Following are the rules:

• noIDs – Don’t style IDs like #foo
• noJSPrefix – Don’t style .js- prefixed classnames
• noOverqualifying – Don’t overqualify your selectors, like div#foo.bar
• noUnderscores – Don’t use underscores when naming classes, like .my_class
• noUniversalSelectors – Don’t use the universal selector *
• zeroUnits – Don’t add the unit to a value of 0, like 0px
• strictPropertyOrder – Enforce a strict property order (order defined here)

For verifying it out, you can create a simple CSS file as shown below:

#my-id { 
color:red;
}
.my_bad_class { 
color:red;
}

Save the file and exit. Go to your terminal and run the following command.

recess path/to/css/file.css

This command will check the CSS file we just created and report the problems. For testing purpose, we had given two cases of broken rules (ids and underscore), so that Recess can flag them.

In case if you want to use #ids in CSS and do not want recess to flag them, you can do that by issuing the following command:

recess path/to/css/file.css --noIDs false

This allows you to set that particular rule to false. You can pass on more options like this if you wish.

For example, recess path/to/css/file.css –noIDs false –noUnderscores false

In the above case, you always have to pass the options whenever you run the command. Suppose you want to configure Recess so that those two rules should be in place every time you run. That can be done by creating a config file, .recessrc.  There are 2 options for placing the config file:

1. In the folder where you run the Recess command. Here, you just have to run the command without any options so that config will be picked up.
2. In any folder other than from where the recess command is issued. Here, you will have to pass on the options to config file like this:

recess path/to/css/file.css --config=path/to/config/.recessrc

What you will be pasting in the file depends on what you want to rule out. If you want to ignore IDs and underscore validations, you can update your file as shown:

{
"noIDs": false,
"noUnderscores": false
}

Another important feature for Recess is that, you can use it to complile the CSS file and make some automated changes for you. You can add the ‘–compile’ option to the command and the Recess will compile accordingly.

recess path/to/css/file.css --compile

As a matter of fact, it cannot fix all of the broken rules, but can normalize white spaces, strip units from 0 values and re-order properties.

If you want to save the result of the compilation automatically, you can do that with the command:

recess path/to/css/file.css --compile > path/to/css/compiled-file.css

Note: Whenever the command is issues, the results of the Recess compilation of first css file will replace the contents of second css file.

That’s it about the Recess and I hope you find this tutorial helpful.