Introducing Recess

We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea.

We already have a famous one for JavaScript, JSLint, and now Twitter has given us one for CSS. It’s called Recess and it can help us keep our CSS code clean and super manageable.

Installation

In order to install this linter you’ll first need to have node and npm installed on your computer. If you have that installed then installing recess is as simple as running this command:

npm install recess -g

If you encounter any problems in the installation it’s because you need to run the command as an administrator, in which case just place sudo before the command:

sudo npm install recess -g

And with that you have Recess installed and running on your machine.

Using Recess

Being a linter, Recess has a couple of rules to help you clean your code, which are:

• noIDS – Recess will throw an error when you style any ID
• noJSPrefix – Any styling of a class name with the .js- prefix will also throw an error
• noUnderscores – An error will be shown if there is a class name with an underscore in it
• noUniversalSelectors – Recess doesn’t really like the idea of using the * universal selector
• noOverqualifying – Don’t over specify a selector, something like div#add.clear will throw an error
• zeroUnits – Recess will throw an error if you declare the unit for a value of 0, something like margin: 0px will give you an error
• strictPropertyOrder – Recess enforces a strict property order that you can view here.

Now that you know the rules that Recess will test your code on, we can begin by testing some code and to do that you need to type:

RECESS sitename/css/styles.css

This will test your file with all the rules mentioned above but if you don’t want one or more of these rules to be applied you can pass the names of those rules as an option followed by the keyword false:

RECESS sitename/css/styles.css --noIDs false --noOverqualifying false

Another great thing we can do with Recess is compile our LESS files and to do that we type:

RECESS sitename/css/styles.less --compile

And if you don’t want to compile every time you make a change, you can also watch the file (or directory) and it will compile automatically every time a change is made:

RECESS sitename/css/styles.less --watch --compile

After using this tool for a while, you may find a way you prefer to configure your options. You do this with a cofiguration (.recessrc) file:

{
"includePath": ["path”],
"noIDs": false,
"noUnderscores": false,
"noOverqualifying": false
}

By default if you do not provide the path to a configuration file, Recess will automatically check for a local .recessrc file and pass those options.

Conclusion

Clean and simple code is the best we can ask for as programmers and any tool that can help us achieve that is more than welcome. Recess is a great tool when it comes to making you write good CSS.