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.