Optimizing CSS Stylesheets with RECESS

Sometimes, it’s really disappointing to see how a really great tool can fail to come to the limelight, due to a lack of visibility and good promotion. The particular tool I’m talking about is RECESS, a CSS and LESS compiler built by developers at Twitter. Launched in early 2013, it is one of the most overlooked tools of the year.

What is RECESS?

RECESS is an open source tool that is built on LESS and can be greatly used to optimize your CSS code. It has some of the most powerful features that web developers have longed for. Twitter calls it a “CSS Hinter” but I prefer to think of it as a “CSS Compiler”. In this tutorial, I will show how to start using RECESS and explore some of its best features. RECESS was built to check the quality of CSS rules. It helps to keep the CSS code clean, error free and manageable. It can also be integrated directly into your project so as to compile the stylesheet whenever there is any change. Let’s get started using it.

Getting Started with RECESS

The first thing that you need to run RECESS is Node.js. Go to nodejs.org/download/ and select the best installer for your operating system. Follow the instructions (if needed). Once Node.js is installed on your system, you can cross check it using the following command.

node [press enter]
1+1 [press enter]

If you see the correct result in the third line (obviously, it should be 2) then Nodejs is up and running! Woooo… ;) Press ctrl+c twice to exit the node environment. Now we have to install the RECESS package from the Nodejs repository. Enter the following line at the command prompt.

npm install recess -g

You will see a scene similar to one in the The Matrix movie, and finally RECESS will be installed. Bravo! Let’s cross check RECESS installation too. Just type recess at the command prompt and press enter. You will see a help guide showing various options that can be used along with the recess command.

Writing your first RECESS Command

Let’s begin by analyzing some of our previously created CSS files. I have created a new workspace for RECESS: C drive > Recess_demos folder, and then copied a CSS file from my previous project. Navigate to the workspace in the command prompt and type

recess [filename] [press enter]

In my case, it was recess customstyle.css. As shown in the screenshot below, it tells me there are five failures in my CSS file, followed by the reasons for the failure. This way you can always see the warnings inside your stylesheet whiling designing any project.

Compiling CSS file

When you compile a CSS file using RECESS, it autocorrects using Strict Property Rules and then logs the corrected styles. For example, let’s create a simple CSS file named demostyle_1.css, with the following rules inside it:

.jumbotron{
	margin-top: 40px;
	background: url("../images/featured.jpg") bottom center no-repeat;
	background-size: cover;
	color: #FFFFFF;
}

Now type the following inside the command prompt.

recess demostyle_1.css --compile

It autocorrects and gives the following output.

.jumbotron {
  margin-top: 40px;
  color: #FFFFFF;
  background: url("../images/featured.jpg") bottom center no-repeat;
  background-size: cover;
}

Now, if you’re thinking how to forcefully log the output inside a new file instead of the command prompt, then write the command as follows.

recess [path to old file] --compile > [path to new file]

In my case the command was: recess demostyle_1.css --compile > demostyle_1_compiled.css. This created a new file named demostyle_1_compiled.css with the corrected rules inside the same folder. Let’s try with few more CSS rules: Input:

.avatar img{
  -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
}

Output:

.avatar img {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
      -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
       -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
}

Isn’t it awesome?

Compiling LESS file

RECESS has not restricted itself to CSS files only. You can also compile LESS files on the go. Let’s create a dummy .less file with the following content in it.

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Compiling LESS files in RECESS is similar to compiling them in a LESS compiler. Just type

recess [path to less file] --compile

In my case, it turned out to be recess dummy_less.less --compile. Output:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}

.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Rules of RECESS

There are many rules which RECESS follows while compiling the CSS or LESS files. These rules are by default turned on and can be suppressed individually.

1. noIDs
   1. Usage: recess filename.css --noIDs true.
   2. This will now show a warning “IDs should not be styled”. You can set it to false when you want to ignore this rule
2. noJSPrefix
   1. Usage: recess filename.css --noJSPrefix true.
   2. Setting it to true will generate a warning whenever you try to style .js-* classes.
3. noOverqualifying
   1. Usage: recess filename.css --noOverqualifying true
   2. Ignores div#foo.bar type of styling.
4. noUnderscores
   1. Usage: recess filename.css --noUnderscores true
   2. Warns when you use underscores in the class names
5. noUniversalSelectors
   1. Usage: recess filename.css --noUniversalSelectors true
   2. Warns when you try to style using universal selector *
6. zeroUnits
   1. Usage: recess filename.css --zeroUnits true
   2. Warns when you provide units to the zero property values.
7. strictPropertyOrder
   1. Usage: recess filename.css --strictPropertyOrder true
   2. Checks strict property rules as specified here.

Compress or Minifying CSS or LESS files

RECESS can even help you compress or minify large stylesheets within seconds. This is one of the handy feature that comes with this tool. Use the following command to do it:

recess filename.css --compress

Conclusion

Clean and simple code is extremely important in every project these days. Any tool that helps us achieve this should be welcomed and explored. I hope you will try RECESS in your next project, as I did. Hopefully, you enjoyed understanding this great tool and let’s hope we get to see more updates in this tool in near future. Let me know your suggestions on this topic by commenting below. You can also make a suggestion if you find a better tool than this one: we’ll be happy to explore that too. If you want learn more about Node.js you can do so by reading Jump Start Node.js, a Learnable book by Don Nguyen. You can also take the Launch into LESS course to speed up your CSS development using LESS.

Frequently Asked Questions (FAQs) about Optimizing CSS Stylesheets with Recess