Tabs

I’ve long been on the “spaces” side of the tabs vs. spaces preference debate. I think there is just something that feels sturdy and reliable about spaces. I’m wrong though. Despite not having swapped over most of my projects, I think that, objectively, tabs are the better choice.

  1. It doesn’t actually matter in code editors. There is no visual difference or UX difference. Either way, press the tab key, code indents using your preference. On any major project, that preference is probably set with an EditorConfig file. And/or, Prettier is used and configured to make sure indentation is consistent. As developers, we care more about consistency than individual preference.
  2. If tabs are used, tabs can be configured on an individual basis to be of a certain length. So if you prefer that short 2-space length, you can have that, while someone else on the project can prefer an airy 6-space length, but you’re both using tabs.
  3. Tabs solve two accessibility issues: #2 above is one of them, and the other is braille displays.

So since it doesn’t impact experience, allows for individual preference matching, and is more accessible, that makes tabs objectively better.

There is also the matter of reading code on the web itself. I was just reading Dynamic Tab-Size Demo Using CSS Custom Properties In JavaScript from Ben Nadel and it makes the same point as #2 above. There is a tab-size property in CSS, and that allows for control over how visually indented code can be in a way spaces can’t. See:


CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

6 responses to “Tabs”

  1. Rach Smith says:

    Sames. I preferred spaces because I like the · · · · dots in my editor aesthetically (with show whitespace turned on). But the benefits you outlined above outweigh what I like about spaces.

  2. Marc Thiele says:

    Basti once said, that it also safed 300kb for Kirby, switching to tabs: https://twitter.com/getkirby/status/1543514895530053633

  3. Derek Wood says:

    Agreed!

    So, what’s stopping people from using them? The thing I hear most is that other services will translate the tabs to spaces or something and it will cause trouble. However, that seems like something the service should address – and not the user. I haven’t experienced any blow-back when using tabs in my personal projects – but I always wonder if the day will come. As a teacher, I keep my code in tabs and at 3 tab-size for readability on screen. On a job, it’s usually already decided by a company coding style-guide.

  4. James Edwards says:

    Spaces are more interoperable. You can’t support typing tab characters in an online code editor without breaking standard keyboard navigation.

    The point about configurable tab size is fair, but it’s a point of technical simplicity only. It is technically possible to use spaces for indentation and still provide control over the size of this indentation.

    The point about Braille displays is a red-herring. I’ve asked three different braille users about this, and they all said that their device software gives them control over how whitespace is handled.

    • Chris Coyier says:

      You can’t support typing tab characters in an online code editor without breaking standard keyboard navigation.

      It’s true! Once you’re in any element that accepts the Tab key as a character rather than moving focus, that’s broken. Happens on CodePen. We allow users to press ESC to get out of the editor, have keyboard shortcuts for moving between editors, and allow skipping over the editors. A lot of work, but necessary, because I don’t think there are very many coders out there pressing the space bar to indent code. Do you? I’m not sure I’ve ever seen that once in my life, but the world is a big place.

      It is technically possible to use spaces for indentation and still provide control over the size of this indentation.

      I don’t think I’ve ever seen this in my life either. Are you saying a code editor could, like, stretch the width of a space to a configured value?

      I’ve asked three different braille users about this, and they all said that their device software gives them control over how whitespace is handled.

      That’s a good blog post right there. I’d love to get any braille users that are willing to go on the record saying what is the case here. I’m echoing in this Braille concern that I’ve heard at least dozens of times since it was surfaced this year as a concern, but I don’t think I’ve read any personal accounts.

  5. John Lusk says:

    The alignment of comments tabbed out to the right of tab-indented code will get messed up when Developer B picks a different tab width from Developer A.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️