Style Guide

Formatting and whitespace

  • Lowercase tag name.
  • Lowercase attribute name.
  • Use double-quotes for attribute values (not single-quotes).
<!-- Good -->
<img src="#">

<!-- Bad -->
<IMG SRC='#'>

Attribute order

Use the order of attributes to improve the developer experience (the browser doesn’t care). Simple rules:

  1. Put class attribute first (developers read/write this most often).
  2. Put id attribute second (important if it’s defined).
  3. Everything else is alphabetical.
  4. Put data-* attributes last (alphabetical).
<div class="" id="" onclick="" data-abc="" data-xyz="">
<form class="" id="" action="" method="">

Exceptions

When an attribute is critical to defining an element put it first to improve readability:

<!-- The "type" defines the element's behavior. -->
<button type="" class=""></button>

<!-- Put "src" before "alt". -->
<img class="" src="" alt="">

<!-- The "type" defines the element's rendering. -->
<input type="text" class="" id="" disabled name="" placeholder="" readonly value="">

Attribute overload

When an element has too many attributes it’s hard to read. Break attributes onto lines:

<button
type="button"
class="button"
id="coordinates-button"
data-loading="Loading..."
data-x="123"
data-y="789">
    Send Coordinates
</button>

Some people probably hate that the attributes aren’t indented. I think the DOM structure is easier to scan with outdented attributes and the closing > on the last line.

Indentation

Use 4 spaces (not tabs) for indentation.

<ul>
••••<li>Item<li>
<ul>

Optional tags

Optional tags aren’t required by the HTML spec to have a closing tag.

Always be close optional tags for readability and consistency.

<!-- Good -->
<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<!-- Bad -->
<ul>
    <li>One
    <li>Two
</ul>

Void elements

Void elements don’t have a corresponding closing tag.

They don’t need a trailing slash anymore. Yeya, HTML5!

<!-- Good -->
<br>
<hr>
<img>
<input>
<link>
<meta>

<!-- Bad -->
<br />
<hr />
<img />
<input />
<link />
<meta />