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.
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.
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:
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:
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.
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.