Indentation of code

One thing that I’ve always taken for granted how to do is the indentation of code. Sure, people place characters like { either on the same line as the CSS rule/JavaScript function name, or on the following, and that’s just fine. But what I mean here is how to accomplish the actual indentation.

Let’s take these two simple code examples:

.make-pretty{
	color: pink;
}

function createWeb_2_dot_0_app(){
	/*
		Insert superfluous AJAX calls together
		with an abundance of tagging all over...
	*/
}

Ok, all fine so far. But, and here lies the question: how do you make, for example, the code color: pink; to be placed further to the right than the line above? “Huh?!”, you say. Ok, I mean, how do you indent it. “Oh, that’s easy, I press the Tab key”. To me, that has been the most given answer too.

But I’ve recently learned that a number of people don’t use the Tab key, but instead press the Space bar a number of times (like, 3) to indent it. I would never use any formatting like that, since it just makes it a lot harder to get consistent indentation throughout the code. Also, with a lot of code, all those extra whitespace characters will in the long run lead to an increased file size.

So, I beg of you: if you use the Space bar to indent code, please re-think. For me. Please.

35 Comments

  • Many moons ago I used the space bar to indent as well. Then someone convinced me to use tabs. The most important reason was that by using tabs, any one could apply their personal indentation preferences to the document, without modifying the document itself.

    I use four-spaced tabs in CSS, Javascript and PHP. However, someone else might prefer two, three or eight spaces. If their text editor allows them to define tabs as such, my documents will be displayed the way they want it to be.

    I just wished Dreamweaver would allow me to define different settings for different types of documents. I want to use two-spaced tabs in HTML documents, please. πŸ™

  • albert says:

    spaces are the convention in ruby. it is basically because tabs does not cut it. it is a nice idea and all, but when you use different tab spacing, code just tends to look like shit. so tab should expand to spaces, for the sake of readability.

  • Tabs feels natural for me, and textmate makes most of the issues transparent πŸ™‚

  • I also always use tabs, but it seems that it can mess things up for people with different editors:

    Indentation in the PEAR coding standard

    Tabs versus Spaces: An Eternal Holy War.

  • Yes, Pear suggests to use Spaces instead of Tabs. For me, it's more a question of personal flavor! I used tabs for ages and in my own opinion it just looks great in every editor, except for Notepad where tabs takes in almost 6 spaces!

    And as Jeroen said in the first post, you can adjust the width of tabs in different editors so it just looks the way you like it! Personally the best way to deal with it!

  • I quite agree with what you say here Robert, but as Marcus states, tabs will fubar the appearance in different editors. Some editors don't even support the use of tabs, scaringly enough..

  • Ole Hansen says:

    As long as we're only talking indentation of complete lines, it doesn't really matter which is used, as long as that choice is used consistently.

    However, if the code contains parts that are layed out in multiple columns, the only way to use tabs would be to ensure that everybody working on that file use the same settings, or the code would look horribly messed up.

    Try viewing code like the following with different tab settings.

    <code>   int        Number;

       string     Name;

       SomeClass  MyObject;

    </code>

  • I couldn't agree more!

    Another awful thing of using spaces is deleting the next line when the cursor is on the current line.

    What I mean is, you go to the end of a line, and press Del a couple of times. I navigate primarily using my keyboard when writing code, and when the cursor happens to be on the line above the one I wish to delete, I'm to much of a lazy programmer to skip to that particular line and just hit End and Delete a couple of times.

    When editing code written by another developer that used spaces to indent the code, it takes you way too much hits on the Del button to remove a line.

    Of course that's all nitpicking though πŸ™‚

  • On that concern, an interesting material is to learn some Python language.

    One of the most interesting features in python is that you use indentation rather than curly braces (like most languages) parenthesis (like lisp) or anything else.

    With that alone, you can have cohesion between good indentation habits and software blocks.

    Therefore, the rules of indentation in Python are interesting learning material, even though one is free not to like them.

  • A thought comes to mind here, why not implement a standard when it comes to indentation? In general HTML/CSS it’s pretty easy to adjust to fit text indentation needs, but as I see it there are no good way of adjusting it in editors (just a handfew I’d guess).

    I really doubt that this would be implemented on a day, if ever, but it’s an idea to have in mind when making new editors..

  • > When editing code written by another developer that used spaces to indent the code, it takes you way too much hits on the Del button to remove a line.

    Just hold the Ctrl key.

    I use tabs for the base indentation, but spaces for aligning. Using tabs for aligning breaks other tab widths, completely killing the whole point of using tabs in the first place. Using spaces for base indentation is possible, but I'm just too lazy to do it – even when coding standards require it, I'll either do the whole thing in tabs and let my editor convert afterwards, or at least I'll set my tab key to insert a number of spaces instead. Yay for jEdit.

  • Erik says:

    In BBEdit (and I’m sure every other good text editor out there) you are able to set the ‘Tab Key’ to insert any number of spaces (I prefer 4) instead of tab stops. This way, when you use the tab key (or indent and outdent key combos), it adds 4 spaces instead of the tab stop character. It also has a command to entab or detab a document, meaning turn all tab stops into 4 spaces or vice-versa.

    There are times where I must use spaces instead of tabs, since most of the code I use exchanges hands with many different platforms and text editors.

  • CK says:

    At times tabs can be a little too big, meaning that code gets shuffled a fair and merry way across my screen causing me to scroll back and forth.

    In general, however, I completely agree as it gives more standard and regular spacing.

  • Jens Meiert says:

    Robert, thank you! πŸ™‚

    If you don’t compress your files in any way, be it by scripts (like Peter Bengtsson’s HTML/CSS compressor, for example) or by using mod/gzip (or both), please be aware that spaces make files larger (without any practical need) … Also, it’s sort of a “semi-standard” that one tab equals four spaces. I digress, better use tabs.

    PS. Robert, apparently, even abbreviations without any title attribute set get styled.

  • Out of the 5 developers in our studio 4 use spaces and I use tabs (I'm also the only editplus user the rest use HTMLkit – oh what a rebel I am!!)

    But we never have any problems passing files back and forth, we just needed to make sure that our settings were synced.

    When I open a file in my editor it changes their 4 spaces to tabs and vica-versa for them πŸ™‚

    So we don't really have an issue with it.

    I just prefer tabs as I think they are easier to work with (I don't like having to press the backspace key more than times than I have to)

  • Pat says:

    I like spaces, however I prefer the tab key.. so in all my coding, be it Perl, CSS, HTML, I’ve used EditPlus forever, and I configured it so my tabs turn out to be spaces (like Eric said). I made my editor do that because I noticed with tabs, my code looked all weird and off indentation wise when I viewed source. I’ve found that spaces are much better when viewing your files in different editors.. everything looks like I wanted it to.

    If you’re not careful this could turn into obsessive behaviour {{guilty}} :).

  • Lachlan Hunt says:

    I don't format my CSS like that, so my indentation technique doesn't really apply to those that do. I use spaces for alignment in CSS. This is how I lay out my CSS: (It would normally wrap at roughly 80-100 chars, but you should get the idea.

    body { background: white; color: black;

    font: medium sans-serif; text-align: justify; }

    I find that technique most suitable for CSS because it's nice and compact and allows me to see and work with so much more on one screen than other techniques, like one-property-per-line, etc.

    For other code, JavaScript and other programming languages, I use an appropriate mix of tabs and spaces to work around the alignment problems that occur with different settings. In other words, tabs for indentation and spaces for alignment.

    Note: Underscores represent tabs, dots represent spaces.

    function.foo().{

    ____var a…….=.1;

    ____var longvar.=.2;

    ____if.(a.!=.b………// A multi-line comment that

    ____.&&.c.!=.d).{……// is aligned using spaces

    ________doSomething();

    ____}

    }

    Here's the same code again using actual spaces and tabs for indentation:

    function foo() {

    var a = 1;

    var longvar = 2;

    if (a != b // A multi-line comment that

    && c != d) { // is aligned using spaces

    doSomething();

    }

    }

    As far as I'm concerned, that's the only sensible aproach. Tabs for everything (including alignment) isn't acceptable because it breaks in editors with different settings. Spaces for everything is acceptable on the condition that exactly 4 spaces are used for each indentation level.

  • Lachlan Hunt says:

    oh well, my use of the pre element got stripped, so my examples are kind of messed up. Heres' the CSS again using dots for alignment instead of spaces:

    <code>body { background: white; color: black;

    …….font: medium sans-serif; text-align: justify; }</code>

  • halans says:

    In regards to Java, the Sun Java/JSP code conventions states:

    "Indentations should be filled with space characters. Tab characters cause different interpretation in the spacing of characters in different editors. A unit of indentation corresponds to 4 space characters." And that's what we use at work. Everyone is "encouraged" to use the same settings, as else keeping track of or merging changes in CVS/SVN becomes quite hard. Eclipse can be set to automatically convert tabs to X spaces. Checkstyle and FormatOnSave plugins help you to keep your code formatted according to company policy.

    For CSS I use TopStyle to expand and collapse the code, as extra characters do make a difference in bytes in the end.

    My 2c.

  • Robert Nyman says:

    Wow, apparently this was an interesting topic! πŸ™‚

    In the end, it sounds like it's mostly about environment settings; if you can tune how spaces vs. tabs are handled, and you can agree within the team, it's either way.

    Personally, I think it's harder/more annoying to edit a file with space indentation since it's far harder to make sure that all spaces are consistent throughout the file.

    And last, but not least, when i comes to HTML, CSS and JavaScript it will affect the file size that the end user has to download, so in those languages I'm strongly for tabs.

  • Jrf says:

    Oh my… Robert.. I definitely second your call for using tabs rather than spaces.

    Even so, my quick & dirty solution is to use the ConText or Zend IDE editor whenever someone has used spaces in their code. Both can convert tabs to spaces and visa versa without a hitch.

  • Allen says:

    I find myself disagreeing with you again and with some of the other comment posters. The tab *character* is horrible. There's no telling what any individual persons tabstops in a given editor will be set to.

    The correct method for making your code readable across a wide range of editors and UIs is to use the tab *key*, but tell your editor to use a certain number of spaces instead of the tab *character*.

    I use UltraEdit32 for just about everything and it's simple to tell it to never save tabs characters in a file and to convert them to 'n' spaces whenever it encounters them. Most editors have a similar capability.

    If the tab key hadn't evolved from typewriters and accountants tabbing to specific columns (2 spaces, then 6, then 8, etc) then we'd be ok but as it is, spaces are better.

  • I use Metapad 3.51, indenting at all is so wrong. It is very rare that I download a script and don't have to take out whitespace and trailing whitespace.

  • AndrÃ&A says:

    I wasn't aware this was even a question. I haven't used spaces to ident code since… COBOL, where you actually have to be careful about in which column you're writing your code.

    Spaces increase file size which is what we're consistently trying to reduce (in the web industry, at least). So, I say no no to spaces. Never used them, never will.

    The only question I have is how many tabs to write in each line (in css, particularly). But that's because my editor doesn't allow changing the tab-size. At least, I don't think it does… gotta check that when I'm back at work. πŸ™‚

    Thanks for the relevant questions you keep putting us, Rob. You rock. Period.

  • Robert Nyman says:

    André,

    Thanks. πŸ™‚

  • No, I will not rethink I do it because I am crazy. πŸ˜‰

  • Robert Nyman says:

    Robert Wellock,

    Whatever makes you happy… πŸ™‚

  • I use an online editor sometimes for my cpanel websites and if you use 'tab' it will actually tab to the 'save' button.

    When not using the editor on cpanel, I use tab though. Although I will admit I did not even think about the fact of extra memory, I just did it because tabing is easier than spacing.

  • Michal Caplygin says:

    I use the space bar for indenting code. I use just one space; for many many reasons I consider that the best way, but I am aware of the fact that most probably no-one else will agree with it.

    But, gosh, is it really a problem to write a stupid script for indent conversion, that would calm every upset programmer, who just received someone else's source-code and swears at his indentation habits?

    I tried to write such one :). (do not laugh, I'm not javascript guru at all…)

  • Arthur says:

    Sigh…. Can someone give me an example of how using tabs can "mess things up for people with different editors", because I have never experienced this, and I simply don't understand the concept.

    Of course, things can be messed up if one is talking about tabs in the middle of lines for the purpose of table-based aligning, but I don't see how initial tabs, used soley for initial indentation, can possibly "mess" anything up.

    Maybe some editors that aren't intended for writing code in the first place might mess things up (like a desktop publishing program), but why would someone be using anything other than a source code editor in the first place?

    The W3C's insistance that tabs be rendered at 8 spaces per tab is excessive and stupid, and I can't believe that even the CSS3 proposal still refuses to provide a tab-setting property.

  • john says:

    "Can someone give me an example of how using tabs can “mess things up for people with different editorsâ€Â, because I have never experienced this, and I simply don’t understand the concept"

    I think many people had been confused. When working in a team, everyone should follow the same standard, if one uses spaces, all others should use spaces, if one uses tab, all others should use tabs. This way, the appearence will not get messed up.

    Things got messed up when some developers use tabs while others use spaces. This normally happens in a big development team. This is when a document indentations contain a mixture of spaces and tabs (this happens when different people edits the same document or source code). When this happens, the appearence will appear differently with different editors because the editors has different tab settings as some prefers 2 spaces for a tab and some others prefer 4 spaces for a tab, etc.

    If tabs is preferred, the leader has to fucking make sure the others follow the standard.

  • […] Indentation of code One thing that IÒ€ℒve always taken for granted how to do is the indentation of code. Sure, people […]

  • I used to put tabs into it, but then I ran into a probleml I write code in a number of editors on a number of platforms. All have different font settings and all have different capabilities. Sometimes I write code in a Java application on my mobile phone, and that HATES tabs.

    Use the tab key all you want (I do) but please don’t use the tab character! Actually no, I don’t mind whatever you do, I can handle when something is displayed strangely in my editor so I’m not out to start a religious war or anything.

    What disadvantages are there of treating three or four spaces as tabs? Most editors can be configured to (or even by default) automatically replace tabs with spaces. And if I press backspace @ a set of four spaces? The editor realises that it is indentation, and it wipes all of the spaces in one keypress.

    Two lightweight editors I’m fond of, which exhibit this very useful capability, are Notepad++ and KATE.

    Yes, when I’m in charge, I always say at the start “We’re using spaces for tabs, the tab width is four spaces, here is a set of instructions for the most popular free Windows and Linux editors and IDEs”.
    I think that it makes sense. I like to code for the web. The web is about getting information from A to B. What if I’m at B and I want to edit the information?! By keeping an editor on my cellular phone, I can make little edits any time, any where.

    (This is not advised for mental health reasons)

    Now I’m considering upgrading to a phone that can run C++ apps (say a Symbian or Linux handset) which will surely alleviate some of my woes.

  • Whoami says:

    I like to indent with 2 spaces and half, plus half-tab, when the indentation is smooth, but with 1 tab plus 1 space, when the indentation must be strong.

    Furthermore, configuring the editor to convert and display the square of tab numbers as spaces, one can surely indent perfectly, always!

  • Roalnd says:

    When you become a veteran of many platforms, or you start writing software development books you will stop using the TAB character for all time. You will configure every editor you use to insert spaces instead of TABs and you will refuse to use any editor which doesn't allow you to select every line of a source file you just opened converting its tabs to spaces.

    A lot of the weaker platforms don't even support fixed width fonts. They support things like "Courier New" which only "appears" to be fixed width at certain point sizes.

Leave a Reply

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