oliverdavies.uk/content/node.ebad7a57-881a-470e-9ec0-84ec23ac0802.yml

uuid:
  - value: ebad7a57-881a-470e-9ec0-84ec23ac0802
langcode:
  - value: en
type:
  - target_id: daily_email
    target_type: node_type
    target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
revision_timestamp:
  - value: '2025-07-06T22:48:02+00:00'
revision_uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
revision_log: {  }
status:
  - value: true
uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
title:
  - value: 'Avoiding indentation'
created:
  - value: '2025-07-04T22:46:00+00:00'
changed:
  - value: '2025-07-06T22:48:02+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2025/07/04/avoiding-indentation
    langcode: en
body:
  - value: |-
      A guide that I use when writing or reviewing code is to avoid or minimise indentation.

      Usually, the nearer to the left of the file the text is, the better.

      If you had this code:

      ```php
      <?php

      function doSomething() {
        if ($a === TRUE) {
          if ($b === 'banana') {
            if ($c > 3) {
              // Do something...
           }
          }
        }
      }
      ```

      What if you refactored it to use early returns and remove some indentation?

      ```php
      <?php

      function doSomething() {
        if ($a !== TRUE) {
          return;
        }

        if ($b !== 'banana') {
          return;
        }

        if ($c <= 3) {
          return;
        }

        // Do something...
      }
      ```

      This is easier for me to read and review.

      I can keep track of there I am in the function as it is more linear. Especially if the code within each condition block is more complex.

      ## Indentation in CSS

      CSS now supports nesting, similar to Sass and other preprocessors, so you can write CSS like this:

      ```css
      .menu {
        ul {
          li {
            a {
              color: red;
            }
          }
        }
      }
      ```

      I usually find this harder to search, particularly if a pre-processor like Sass is being used, so I avoid it as much as possible.

      I only really use it to style pseudo-selectors like `:hover` and `:focus` to element.

      ## Indentation in Nix

      In Nix, these two examples achieve the same thing:

      ```nix
      services.gammastep = {
        enable = true;
        provider = "geoclue2";
      };

      services.gammastep.enable = true;
      services.gammastep.provider = "geoclue2";
      ```

      In long files, it can be hard to keep track of what service you're configuring once it has been indented.

      Whilst it adds some duplication, I've recently favoured the second approach in my code.

      ## Here's the thing

      There needs to be some indentation in code to allow for functions, conditions, loops, etc.

      But, whichever language I'm writing, I usually aim for no more than two levels of indentation in a file.

      If code is indented further, I'll try or suggest an alternative approach to reduce the indentation - which usually results in cleaner code overall.
    format: markdown
    processed: |
      <p>A guide that I use when writing or reviewing code is to avoid or minimise indentation.</p>
      <p>Usually, the nearer to the left of the file the text is, the better.</p>
      <p>If you had this code:</p>
      <pre><code>&lt;?php

      function doSomething() {
        if ($a === TRUE) {
          if ($b === 'banana') {
            if ($c &gt; 3) {
              // Do something...
           }
          }
        }
      }
      </code></pre><p>What if you refactored it to use early returns and remove some indentation?</p>
      <pre><code>&lt;?php

      function doSomething() {
        if ($a !== TRUE) {
          return;
        }

        if ($b !== 'banana') {
          return;
        }

        if ($c &lt;= 3) {
          return;
        }

        // Do something...
      }
      </code></pre><p>This is easier for me to read and review.</p>
      <p>I can keep track of there I am in the function as it is more linear. Especially if the code within each condition block is more complex.</p>
      <h2>Indentation in CSS</h2>
      <p>CSS now supports nesting, similar to Sass and other preprocessors, so you can write CSS like this:</p>
      <pre><code>.menu {
        ul {
          li {
            a {
              color: red;
            }
          }
        }
      }
      </code></pre><p>I usually find this harder to search, particularly if a pre-processor like Sass is being used, so I avoid it as much as possible.</p>
      <p>I only really use it to style pseudo-selectors like <code>:hover</code> and <code>:focus</code> to element.</p>
      <h2>Indentation in Nix</h2>
      <p>In Nix, these two examples achieve the same thing:</p>
      <pre><code>services.gammastep = {
        enable = true;
        provider = "geoclue2";
      };

      services.gammastep.enable = true;
      services.gammastep.provider = "geoclue2";
      </code></pre><p>In long files, it can be hard to keep track of what service you're configuring once it has been indented.</p>
      <p>Whilst it adds some duplication, I've recently favoured the second approach in my code.</p>
      <h2>Here's the thing</h2>
      <p>There needs to be some indentation in code to allow for functions, conditions, loops, etc.</p>
      <p>But, whichever language I'm writing, I usually aim for no more than two levels of indentation in a file.</p>
      <p>If code is indented further, I'll try or suggest an alternative approach to reduce the indentation - which usually results in cleaner code overall.</p>
    summary: ''
field_daily_email_cta:
  - target_type: node
    target_uuid: 9b4c39a3-702f-486c-a79b-4d7b96a4f3f6