How To Install and Use Recess on a VPS

Status: Deprecated

This article covers a version of Ubuntu that is no longer supported. If you are currently operate a server running Ubuntu 12.04, we highly recommend upgrading or migrating to a supported version of Ubuntu:

• Upgrade to Ubuntu 14.04.
• Upgrade from Ubuntu 14.04 to Ubuntu 16.04
• Migrate the server data to a supported version

Reason: Ubuntu 12.04 reached end of life (EOL) on April 28, 2017 and no longer receives security patches or updates. This guide is no longer maintained.

See Instead:
This guide might still be useful as a reference, but may not work on other Ubuntu releases. If available, we strongly recommend using a guide written for the version of Ubuntu you are using. You can use the search functionality at the top of the page to find a more recent version.

About Recess

---

Recess is a code quality tool developed by Twitter meant to help you write better css by enforcing guidelines. Built on top of LESS, Recess can be used as a linter in your development process to keep your code clean and maintainable.

In this tutorial we will install Recess on a VPS running Ubuntu 12.04. You should already have your own virtual private server, as well as Node.js and NPM (Node Packaged Modules) installed. If you don’t, follow the steps outlined in this tutorial to get set up.

Installation

---

Once Node and NPM are on your virtual server, run the following command to install Recess:

npm install recess -g

Now the fun part: using Recess

So how exactly would you use this cool code helper? Well, there are a few standard rules about writing css. For instance, you should not overqualify selectors or use #ids in them. Recess has built in its configuration some of these rules, and you can have it run through your css files and have them checked.

After you install Recess, you have the following rules out-of-the-box:

• 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)

To test it out, create a simple css file and paste in the following:

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

Save the file and exit. Now run the following command in your terminal:

recess path/to/css/file.css

This command will check your file and report the problems. In our test css file we broke 2 rules, so Recess should flag them. If you want to have it run through all the css files in a folder, run the command like this:

recess path/to/css/folder/*

This will target all css files in that folder.

Now say that for some reason you want to use #ids in your css and don't want Recess to flag them. You can run the following command:

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

With this command, you pass an option to set that particular rule to false. You can add even more if you'd like:

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

This will now show you that our test file is perfect since neither of the rules we broke are now flagged.

But let's say you don't want to keep passing these options everytime and you want Recess to always take into account that these rules should not be checked against. You need to create a config file called .recessrc. You have 2 options where you can place this file:

• You can place the file in the folder from where you will run the recess command. In this case, all you have to do is run the command with no options and the config will get picked up.
• You place it in another folder than from where you run the recess command. In this case, you'll have to pass as an option the path to the config file. For ex:

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

But what do you place inside the file? Well that depends on what you want to rule out. If you want to make sure the noIDs and noUnderscores rules are not taken into account, you can paste the following:

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

Another cool thing is that you can use Recess to compile the css (or LESS) file and make some automated changes for you. For example, if the order of your properties is not good, you can have Recess compile the file and output to the terminal the css file in the right property order. Just add the --compile option to the command:

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

It can't fix all the broken rules but it will normalize whitespace, strip units from 0 values, and reorder the properties. And if you want to automatically save the result of the compilation, you can use the following command:

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

Keep in mind though that whenever you run this command, the results of the Recess compilation of the first css file will replace the contents of the second css file in the command.

I hope you find Recess helpful and a great addition to your frontend development process.