01. Indenting

The first formatting element you should become familiar with is “Indenting“. Indenting is all about making sure that each distinct section of your code is easily recognisable. Take a look at these two code snippets from a website:

<div class="container">
   <header class="site-header">site header</header>
   <nav>site menu</nav>
   <section>
      <header class="page-header">page header</header>
      <article>page content</article>
   </section>
   <footer>site footer</footer>
</div>
nav {
   padding          : 15px 15px 10px 15px;
   border-radius    : 10px 10px 10px 10px;
   float            : left;
   width            : 220px;
   background-color : #f5d0a9;
}

section {
   float            : right;
   width            : 700px;
}

A web browser doesn’t care about how you indent your code and neither will any IDE you happen to be coding in, but for anyone looking at your code (yourself included), indenting makes it clear what matches what and where things open and close. There are no hard and fast rules on indenting but these guidelines are worth adhering to:

  1. Be consistent: If you use three spaces to move a line inwards, then ALWAYS use three spaces. If you’re trying to line things up for better readability then ALWAYS line them up.
  2. Don’t retreat: If you’ve indented a line, DO NOT retreat back from that level of indentation on subsequent lines until the closing element is met. There’s no point indenting otherwise!
  3. Align Open and Close elements: If the opening and closing parts of a block are on different lines then they must ALWAYS line up underneath each other…no exceptions!

Correctly indenting your code should make it very clear if you forget to put a closing bracket/element and for that reason alone it is a very handy aspect of formatting!

Auto-Indenting
A lot of IDE’s provide a means for automatically indenting your code and so rather than waste hours of your life indenting something carefully before discovering this, do some research into whether the IDE you’re using has a means of auto-indenting or not.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>