When I started writing the first programs at University, I didn’t follow any particular code style or convention and, to be honest, I didn’t even know why those concepts were important. This is probably something that everyone has experience at the beginning, before they defined their own code style or started following the style of someone else. After a few months, I started attending a course with Professor Luigi Lamberti which, despite his very old website, is one of the best computer scientists I had as a professor. He introduced me and my colleagues to the importance of conventions. Instead of teaching us his own conventions, this professor invited us to find our own style and stick with it.

Almost 10 years have passed since that moment and I’ve changed my conventions quite a lot. But there is one thing that isn’t changed and I’m still firmly advocating: the use of 3 spaces to indent the code. Now, I know that some of you might have already labeled me as crazy, but when it comes to code conventions there isn’t a truth or a way better than other. It’s all about tastes.

Despite the catchy title, I don’t think I’m revolutionizing code indentations with my proposal. What I know for sure is that 3 spaces aren’t used a lot to indent code. This is proved by the fact that none of the in-browser developer tools gives you the option to set 3 spaces. They all give you the choice between 2 and 4 spaces, and tabs (or 8 spaces). I don’t know if this post will convince someone to change his convention or at least to give 3-spaces code indentation a try, but I still want to share my opinion.

Other code indentation styles

I think that a large number of developers is moving away from tabs, and for a very good reason. When you use the tab, even if you have just a couple of nested blocks (like an if inside a for) your code is already gone well past the middle of the screen (dramatic reconstruction of the facts). If you add another level of nesting then, well, your code is basically aligned to the right edge of the screen. As a result the ease of following the code drops drastically.

Spaces are used by most of the developers but there are two dominant conventions: 2 and 4 spaces. In my opinion, 2 spaces don’t give the code enough room to be readable. I feel that 2 spaces aren’t enough to understand, at a quick glance, where a nested block ends and when another starts. On the contrary, 4 spaces give a block too much “breath” and I feel this leads to the same issue I mentioned for the tab.

3 spaces seem just perfect. They give you enough space to quickly identify nested blocks, but not so much that after two or three level of nesting your code reaches the right margin of the screen.

When I joined Digital Detox, I proposed this convention to my colleagues. Some of them were really enthusiast about it even if they used a differe style. Others have been more skeptical and reluctant to move away from their conventions. However, after a couple of months a few of them gave 3-spaces indentation a try. They found it to be very effective, hence they joined my movement. Many others have simply kept their old style, which is totally fine.

Now that I’ve explained my reasons for 3-spaces code indentation, it’s time to see it in action.

Examples

In this section I want to show an example of code, taken from this repository of mine, for each of the styles I’ve mentioned. By taking a look at them, you can ponder which one is easier to read for you. Maybe you’ll find that your previous choice doesn’t suit you anymore.

2 spaces

function readFile(file) {
  return new Promise(function (resolve, reject) {
    var fileReader = new FileReader();
    
    fileReader.addEventListener('load', function (event) {
      var content = event.target.result;
      
      content = atob(content.replace(/^(.+,)/, ''));
      
      resolve({
        filename: file.name,
        content: content
      });
    });
    
    fileReader.addEventListener('error', function (error) {
      reject(error);
    });
    
    fileReader.readAsDataURL(file);
  });
}

3 spaces

function readFile(file) {
   return new Promise(function (resolve, reject) {
      var fileReader = new FileReader();

      fileReader.addEventListener('load', function (event) {
         var content = event.target.result;

         content = atob(content.replace(/^(.+,)/, ''));
         resolve({
            filename: file.name,
            content: content
         });
      });

      fileReader.addEventListener('error', function (error) {
         reject(error);
      });

      fileReader.readAsDataURL(file);
   });
}

4 spaces

function readFile(file) {
    return new Promise(function (resolve, reject) {
        var fileReader = new FileReader();

        fileReader.addEventListener('load', function (event) {
            var content = event.target.result;

            content = atob(content.replace(/^(.+,)/, ''));
            resolve({
                filename: file.name,
                content: content
            });
        });

        fileReader.addEventListener('error', function (error) {
            reject(error);
        });

        fileReader.readAsDataURL(file);
    });
}

Tabs

function readFile(file) {
	return new Promise(function (resolve, reject) {
		var fileReader = new FileReader();

		fileReader.addEventListener('load', function (event) {
			var content = event.target.result;

			content = atob(content.replace(/^(.+,)/, ''));
			resolve({
				filename: file.name,
				content: content
			});
		});

		fileReader.addEventListener('error', function (error) {
			reject(error);
		});

		fileReader.readAsDataURL(file);
	});
}

Conclusions

When it comes to code style is all a matter of taste. In this article I’ve tried to explain the reasons that led me to choose 3-spaces indentation for my code. I hope my considerations intrigued you so much that you’ll give this style a go. If you do try it, let me know your thoughts.

The revolution of 3-spaces code indentation
Tagged on:
  • Pingback: Improving the Quality of Front End Projects, Automatically! Pt. 3 - JavaScript and AccessibilityTelerik Developer Network()

  • Andrew Aponte

    I completely agree. Using 2 spaces seems a bit too tight – the code loses its “shape” and becomes hard to read. Whereas using 4 spaces it’s a bit too much – the logic seems semi-disconnected and find a lot of my code getting wrapped because they extend past the print width of the code editor. 3 spaces however… seems to be a sweet spot.

  • Ryo Konishi

    This is one of the few posts I could find by googling “3 spaced indent”, and I’m glad to find a friend (at last). Recent languages have words like “fn” “def” “fun” which creates an indentation right under it, and 2 spaces are just too less! I use 3 spaced indents, also with 5 spaces for continuous newlines. It’s great because it’s a bit less than two indents.

  • Marco Scannadinari

    You have badly represented tabs by implying they are always 8-spaces long – I have my tab setting to 3