Do Not Fear The White Space in your Code
Tags: whitespace, code, codestyle
Published: 2020-01-28 22:49:42

---
title: Do Not Fear The White Space in your Code
published: true
description: White space in your code or how to use design principles for your code.
tags: whitespace, white space, code, code style
---

first published here: https://suckup.de/2020/01/do-not-fear-the-white-space-in-your-code/


<div class="entry-content">
		
<blockquote>
<p>“White space is to be regarded as an active element, not a passive background.”<br>– Jan Tschichold</p>
</blockquote>



<p>At least since Apple is using massive white space for their product pages, every web-designer knows that the visitors prefer simple over the complex designs. And I think we can use some of this design principles to make our code more readable.</p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img data-attachment-id="6620" data-permalink="https://suckup.de/2020/01/do-not-fear-the-white-space-in-your-code/apple-whitespace/" data-orig-file="https://suckup.de/wp-content/uploads//2020/01/apple-whitespace.jpg" data-orig-size="900,616" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="apple-whitespace" data-image-description="" data-medium-file="https://suckup.de/wp-content/uploads//2020/01/apple-whitespace-300x205.jpg" data-large-file="https://suckup.de/wp-content/uploads//2020/01/apple-whitespace.jpg" src="https://suckup.de/wp-content/uploads//2020/01/apple-whitespace.jpg" alt="" class="wp-image-6620" width="507" height="346" srcset="https://suckup.de/wp-content/uploads/2020/01/apple-whitespace.jpg 900w, https://suckup.de/wp-content/uploads/2020/01/apple-whitespace-300x205.jpg 300w, https://suckup.de/wp-content/uploads/2020/01/apple-whitespace-768x526.jpg 768w" sizes="(max-width: 507px) 100vw, 507px"></figure></div>


<h2 align="left">What is white space?</h2>
<p align="left">White space is created by pressing the Return key [\n|\r|\r\n], Spacebar key [ ], or the Tab key [\t]. White space is essentially any bit of space in your code that is not taken up by „physical“ characters.</p>
<pre><span style="color: #404040;"><span style="font-family: Arial, sans-serif;"><span style="font-size: medium;">[\n] = LF (Line Feed) → Used as a new line character in Unix/Mac OS X</span></span></span><br><br><span style="color: #404040;"><span style="font-family: Arial, sans-serif;"><span style="font-size: medium;">[\r] = CR (Carriage Return) → Used as a new line character in Mac OS before X</span></span></span><br><br><span style="color: #404040;"><span style="font-family: Arial, sans-serif;"><span style="font-size: medium;">[\r\n] = CR + LF → Used as a new line character in Windows</span></span></span></pre>
<p align="right"><a href="https://stackoverflow.com/a/15433225/1155858">https://stackoverflow.com/a/15433225/1155858</a></p>
<p align="left">White space is critical for organizing our code, because we tend to find some relations between “things“ to instinctively find a meaning in the composition. Whatever you see, your mind will filter, add and remove the given input and because of that we should prepare the input. So that we can easily consume the code.</p>
<ul>
<li><strong><span lang="en-GB">Vertical White</span><span lang="en-GB">s</span></strong><span lang="en-GB"><strong>pace</strong>:</span>
<ul>
<li>A single blank line.</li>
</ul>
</li>
<li><strong><span lang="en-GB">Horizontal Whit</span><span lang="en-GB">es</span></strong><span lang="en-GB"><strong>pace</strong>: </span>
<ul>
<li><em><span lang="en-GB">Leading White Space</span></em><span lang="en-GB"> (at the start of a line): Leading white space (i.e., indentation) is addressed elsewhere. </span><span lang="en-GB">(Indent with i.e. 4 spaces is a good default.)</span></li>
<li><em><span lang="en-GB">Internal White Space</span></em><span lang="en-GB"> (in the code itself): </span><span lang="en-GB">The code is more readable with some white space between the different operations in a single line.</span></li>
<li><em><span lang="en-GB">Trailing White Space</span></em><span lang="en-GB"> (at the end of a line): This kind of white spaces are unnecessary and can complicate diffs.</span></li>
</ul>
</li>
</ul>
<p align="left"><em>Horizontal alignment</em>: Alignment can aid readability, but it creates problems for future maintenance, if you do not automate your code style.</p>
<p align="left">„White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins <strong>increases comprehension by almost 20%</strong>. Readers find it easier to focus on and process generously spaced content.“<span style="font-family: Arial, sans-serif;"><span style="font-size: medium;"> – <em>[Lin, 2004] Evaluating older adults‘ retention in hypertext perusal: impacts of presentation media as a function of text topology by Dyi-Yih Michael Lin in „Computers in Human Behavior“, Volume 20, Issue 4, July 2004, Pages 491-503</em></span></span></p>



<h2 align="left">Where do we use white space?</h2>
<p align="left"><span lang="en-GB">We mostly add white space after a </span><span lang="en-GB">parameter, </span><span lang="en-GB">function, method, if-, else-, while-, and other calls so that it’s easier to identify where code that belongs together starts and ends.</span> <span lang="en-GB">Unlike a book in which you read from top to bottom, we mostly jump into the code and only read parts of the code. It’s more like a newspaper where you read the headline </span><span lang="en-GB">(</span><span lang="en-GB">i</span><span lang="en-GB">.</span><span lang="en-GB">e</span><span lang="en-GB">. method name)</span><span lang="en-GB"> and then jump to the next article </span><span lang="en-GB">(</span><span lang="en-GB">i</span><span lang="en-GB">.</span><span lang="en-GB">e</span><span lang="en-GB">. method)</span><span lang="en-GB">.</span></p>



<h2>Whitespace changes are tricky for “diff”</h2>
<p>You can use something like “git diff -w” …</p>
<ul>
<li>–ignore-space-at-eol: Ignore changes in whitespace at EOL.</li>
<li>-b, –ignore-space-change: Ignore changes in amount of whitespace. This ignores whitespace at line end, and considers all other sequences of one or more whitespace characters to be equivalent.</li>
<li>-w, –ignore-all-space: Ignore whitespace when comparing lines. This ignores differences even if one line has whitespace where the other line has none.</li>
<li>–ignore-blank-lines: Ignore changes whose lines are all blank.</li>
</ul>
<p>… but the problems is still there, that white space changes hurts readability from default diffs in i.e. gitlab / github / etc. so that you should try to commit white space changes in a separated commit.</p>



<h2 align="left">Be consistent!</h2>
<p align="left"><span lang="en-GB">T</span><span lang="en-GB">he most important and </span><span lang="en-GB">the </span><span lang="en-GB">only things that everybody will agree on is: “</span><strong><span lang="en-GB">Be consistent [and try to automate this process, please]!</span></strong><span lang="en-GB">” </span><span lang="en-GB">F</span><span lang="en-GB">or example, </span><span lang="en-GB">d</span><span lang="en-GB">on’t mix tabs and spaces or playing different </span><span lang="en-GB">braces for the same type of code</span><span lang="en-GB">. If the team </span><span lang="en-GB">(or</span><span lang="en-GB"> project</span><span lang="en-GB">)</span><span lang="en-GB"> didn’t use any code style at all, then it’s quite simple, take an existing coding standard (try to</span> follow the conventions already in place for a language, if there are any<span lang="en-GB">) where automation is already implemented for and stick to it in the first run. </span></p>



<h2 align="left">Design principles for your code</h2>
<p align="left"><strong>Proximity</strong>: Things closer together will be seen as belonging together.</p>
<p align="left"><img data-attachment-id="6630" data-permalink="https://suckup.de/2020/01/do-not-fear-the-white-space-in-your-code/01-proximity/" data-orig-file="https://suckup.de/wp-content/uploads//2020/01/01-proximity.png" data-orig-size="697,207" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="01-proximity" data-image-description="" data-medium-file="https://suckup.de/wp-content/uploads//2020/01/01-proximity-300x89.png" data-large-file="https://suckup.de/wp-content/uploads//2020/01/01-proximity.png" class="aligncenter wp-image-6630 size-full" src="https://suckup.de/wp-content/uploads//2020/01/01-proximity.png" alt="" width="697" height="207" srcset="https://suckup.de/wp-content/uploads/2020/01/01-proximity.png 697w, https://suckup.de/wp-content/uploads/2020/01/01-proximity-300x89.png 300w" sizes="(max-width: 697px) 100vw, 697px"></p>
<p align="left">Code: Put code together that belongs together.</p>
<p align="left"><em>bad:</em></p>
<pre class="western"><span style="color: #669900;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><span style="font-size: medium;"><code class="western">.example_1,.example_2</code></span></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><span style="font-size: medium;"><code class="western">{</code></span></span></span><span style="color: #990055;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">background</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">:</code></span></span><span style="color: #000000;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western"> </code></span></span><span style="color: #dd4a68;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">url</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">(</code></span></span><span style="color: #9a6e3a;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">images/example.png</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">)</code></span></span><span style="color: #000000;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western"> center center no-repeat</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">,</code></span></span><span style="color: #000000;"><code class="western"> </code></span><span style="color: #dd4a68;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">url</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">(</code></span></span><span style="color: #9a6e3a;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">images/example-2.png</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">)</code></span></span><span style="color: #000000;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western"> top left repeat</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">,</code></span></span><span style="color: #000000;"><code class="western"> </code></span><span style="color: #dd4a68;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">url</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">(</code></span></span><span style="color: #9a6e3a;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">images/example-3.png</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">)</code></span></span><span style="color: #000000;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western"> top right no-repeat</code></span></span><span style="color: #999999;"><span style="font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;"><code class="western">;}</code></span></span></pre>
<p align="left"><em>not that bad:</em></p>
<pre>.example_1, <br>.example_2 {     <br> background: url(images/example.png) center center no-repeat,                            <br>             url(images/example-2.png) top left repeat,                            <br>             url(images/example-3.png) top right no-repeat;<br>}</pre>
<p align="left">I also like to have a single blank line before ‚break‘, ‚continue‘, ‚declare‘, ‚return‘, ‚throw‘, ‚try‘, so that you see that this is some kind of important code. But also the readability of simple „if“-statements can be improved.</p>
<p align="left"><em>bad:</em></p>
<pre>if (($loggedInKunde-&gt;bestellungen_genehmigen || $loggedInKunde-&gt;manuelle_bestellgenehmigung) &amp;&amp; ($wareneingang != 5)) {</pre>
<p align="left"><em>not that bad:</em></p>
<pre class="western">if (<br>    (<br>        $loggedInKunde-&gt;bestellungen_genehmigen<br>        ||<br>        $loggedInKunde-&gt;manuelle_bestellgenehmigung<br>    )<br>    &amp;&amp;<br>    $wareneingang != 5<br>) {</pre>
<p align="left">better:</p>
<pre class="western">if ($this-&gt;useOrderApproval()) { </pre>
<p align="left">And please do not mix different things like variable assinment and „if“-statments in one blob of code.</p>
<p align="left"><em>bad:</em></p>
<pre class="western">if (null !== $token = $this-&gt;tokenStorage-&gt;getToken()) {</pre>
<p align="left"><em>not that bad:</em></p>
<pre class="western">$token = $this-&gt;tokenStorage-&gt;getToken();<br>if ($token !== null) {</pre>
<p align="left"><em>better:</em></p>
<pre class="western">$token = $this-&gt;tokenStorage-&gt;getToken();<br>if ($token-&gt;exists()) {</pre>
<p align="left">&nbsp;</p>
<p align="left"><span lang="en-GB"><strong>Similarity</strong>: </span><span lang="en-GB">T</span><span lang="en-GB">hings with the same characteristics (shape, color, shading, orientation, …) will be seen as belonging together.</span></p>
<p align="left"><img data-attachment-id="6629" data-permalink="https://suckup.de/2020/01/do-not-fear-the-white-space-in-your-code/02-similarity/" data-orig-file="https://suckup.de/wp-content/uploads//2020/01/02-similarity.png" data-orig-size="697,207" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="02-similarity" data-image-description="" data-medium-file="https://suckup.de/wp-content/uploads//2020/01/02-similarity-300x89.png" data-large-file="https://suckup.de/wp-content/uploads//2020/01/02-similarity.png" class="aligncenter wp-image-6629 size-full" src="https://suckup.de/wp-content/uploads//2020/01/02-similarity.png" alt="" width="697" height="207" srcset="https://suckup.de/wp-content/uploads/2020/01/02-similarity.png 697w, https://suckup.de/wp-content/uploads/2020/01/02-similarity-300x89.png 300w" sizes="(max-width: 697px) 100vw, 697px"></p>
<p align="left">Code: Write code that do similar things in the same code style.</p>
<p><em>bad:</em></p>
<pre>$valueArray = Bar::searchSplitButKeepQuotes($value);<br>if (\count($valueArray) &lt;= 0) { return ''; }<br><br>$valueFoo = Foo::searchSplit($value);<br>if (\count($valueFoo) === 0) {<br>    return '';<br><br>}</pre>
<p align="left"><em>not that bad:</em></p>
<pre>$bars = Bar::searchSplitButKeepQuotes($value);<br>if (\count($bars) === 0) {<br>    return '';<br>}<br><br>$foos = Foo::searchSplit($value);<br>if (\count($foos) === 0) {<br>    return '';<br>}</pre>
<p align="left">&nbsp;</p>
<p align="left"><strong>Symmetry</strong>: Our mind tends to perceive objects by finding a starting point and it’s pleased when it can find uniformity structures. Sometimes our mind will see such structures also if they are not really there.</p>
<p align="left"><img data-attachment-id="6631" data-permalink="https://suckup.de/2020/01/do-not-fear-the-white-space-in-your-code/symmetry-4/" data-orig-file="https://suckup.de/wp-content/uploads//2020/01/symmetry-4.jpg" data-orig-size="400,427" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="symmetry-4" data-image-description="" data-medium-file="https://suckup.de/wp-content/uploads//2020/01/symmetry-4-281x300.jpg" data-large-file="https://suckup.de/wp-content/uploads//2020/01/symmetry-4.jpg" class="aligncenter wp-image-6631 size-medium" src="https://suckup.de/wp-content/uploads//2020/01/symmetry-4-281x300.jpg" alt="" width="281" height="300" srcset="https://suckup.de/wp-content/uploads/2020/01/symmetry-4-281x300.jpg 281w, https://suckup.de/wp-content/uploads/2020/01/symmetry-4.jpg 400w" sizes="(max-width: 281px) 100vw, 281px"></p>
<p align="left"><span lang="en-GB">Code: Try to use uniformity code structures. </span></p>
<p align="left"><em>bad:</em></p>
<pre class="western"><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;"><span style="color: #0000ff;"><span style="font-family: Arial, sans-serif;"><span lang="en-GB">if </span></span></span><span style="color: #404040;"><span style="font-family: Arial, sans-serif;"><span lang="en-GB"><span style="color: #404040; font-family: Arial, sans-serif; font-size: medium;">(widget.IsRegular)</span> </span></span></span></span></span></span><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">{</span></span></span>
<span style="color: #333333;">    <span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">service.Process(widget);</span></span></span>
<span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">} </span></span></span><span style="color: #0000ff;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">else </span></span></span><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">{</span></span></span>
<span style="color: #333333;">    <span style="color: #0000ff;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">var </span></span></span><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">result = widget.Calculation();</span></span></span>
<span style="color: #333333;">    <span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">widget.ApplyResult(result);</span></span></span>
<span style="color: #333333;">    <span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">service.ProcessSpecial(widget);</span></span></span>
<span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">}</span></span></span></pre>
<p align="left"><em>not that bad:</em></p>
<pre class="western"><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;"><span style="color: #0000ff;"><span style="font-family: Arial, sans-serif;"><span lang="en-GB">if </span></span></span><span style="color: #404040;"><span style="font-family: Arial, sans-serif;"><span lang="en-GB"><span style="color: #404040; font-family: Arial, sans-serif; font-size: medium;">(widget.IsRegular)</span> </span></span></span></span></span></span><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">{</span></span></span>
<span style="color: #333333;">    <span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">service.Process(widget);</span></span></span>
<span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">} </span></span></span><span style="color: #0000ff;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">else </span></span></span><span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">{</span></span></span>
<span style="color: #333333;">    <span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">service.ProcessSpecial(widget);</span></span></span>
<span style="color: #333333;"><span style="font-family: Monaco, Menlo, Consolas, Courier New, monospace;"><span style="font-size: medium;">}</span></span></span></pre>
<p align="left">&nbsp;</p>
<p align="left">Links:</p>
<ul>
<li><a href="https://google.github.io/styleguide/">https://google.github.io/styleguide/</a></li>
<li><a href="https://www.smashingmagazine.com/2013/02/using-white-space-for-readability-in-html-and-css/">https://www.smashingmagazine.com/2013/02/using-white-space-for-readability-in-html-and-css/</a></li>
<li><a href="https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/">https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/</a></li>
<li><a href="https://odetocode.com/blogs/scott/archive/2011/02/07/the-value-of-symmetry.aspx">https://odetocode.com/blogs/scott/archive/2011/02/07/the-value-of-symmetry.aspx</a></li>
<li><a href="https://manifesto.co.uk/design-principles-gestalt-white-space-perception/">https://manifesto.co.uk/design-principles-gestalt-white-space-perception/</a></li>
</ul>

	

</article>