Code Should Breathe
Tags: codequality
Published: 2019-08-07 11:28:50

_Note: This is my opinion. If you have thoughts or concerns, that's fine - feel free to [message me](https://twitter.com/mknepprath)._

In programming, there can be an obsession with brevity, compactness and cleverness (i.e. magic). How much can I do in one line? How few lines can I have in my component? How much can I abbreviate my variable names? All of this leads to the code equivalent of hyperventilation.

What if we let our code breathe a little? "Breathing room" here is defined as extra lines and empty space within code. Here are a couple ways this can be accomplished.

# Use Blank Lines To Create Sections
A List Apart had a great article about the use of whitespace in web design entitled simply, Whitespace. This piece refers to a concept called **active whitespace**, "whitespace added to a composition to better emphasize or structure, information." In code, use whitespace (blank lines) to clearly separate imports, methods, and so on. Here's an example from this website:

```javascript
  // External
  import parse from "date-fns/parse";
  import Link from "next/link";
  import { withRouter } from "next/router";

  // Components
  import Page from "core/page";

  // Data
  import { posts } from "../posts.json";

  class Writing extends React.Component {
    ...
```

              
And, of course, there are examples of great whitespace usage in the official React docs. See the code examples in the [Adding Lifecycle Methods to a Class](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) section. From the A List Apart article, " [W]hitespace creates breathing room and balance. It’s important."

# Lint Rules
If a lint rule exists that enforces adding more lines and space, implement it. One example: [vue/html-closing-bracket-newline](https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-closing-bracket-newline.md).

```html
 <!-- Example A: -->
 <p
   id="foo"
   class="bar">
   baz
 </p>

 <!-- Example B: -->
 <p
   id="foo"
   class="bar"
 >
   baz
 </p>
```
              
Given the two options above, **Example B** allows for more breathing room. It's easier to understand at a glance. Multiply **Example A** by a dozen elements with varying numbers of attributes and it becomes increasingly difficult to see where attributes end and text/nested elements begin. I propose that when choosing between two lint rule options, always choose the one that adds more lines and space.

# Close Blocks Clearly
While I do enjoy the simplicity of [Pug](https://pugjs.org/api/getting-started.html), the template engine formerly known as Jade, I do believe some human processing speed is lost due to the lack of closing tags.

```html
<!-- Example A (Pug) -->
.fancy-link
	a(href="/")
    | Home
.fancy-link
  a(href="/about")
    | About

<!-- Example B -->
<div class="fancy-link">
	<a href="/">
		Home
	</a>
</div>
<div class="fancy-link">
	<a href="/about">
		About
	</a>
</div>
```
              
While I love the brevity of Pug here, I personally think there's too much left to the imagination. Again, multiply **Example A** by a dozen different, nested elements and it becomes dense and difficult to parse.

# Breathe!
On a fun website called [Dwitter](https://www.dwitter.net/), contributors are challenged to see what they can create with 140 characters (or less) of JavaScript. While limiting characters can be a fun constraint, this isn't code I want to read on a day-to-day basis. Instead, let's luxuriate in the fact that we have room to breathe.

![](https://thepracticaldev.s3.amazonaws.com/i/4navxlkxzsyyfea1n0nq.jpg)