Code Guidelines

See everything you need to know about HTML and CSS.

CSS

Syntax

Be mindful of a few formatting rules to help keep our CSS consistent. When you view a CSS file, it should look like 1 person wrote it.

  // Bad
  .elm { position:relative }

  // Good
  // 💡 Always expand CSS rules for readability. Even if a single style is added.
  // 💡 Always put a space after the :
  // 💡 Always end a style with a ;
  .elm {
    position: relative;
  }

Limit nesting

Nesting should typically be 3 levels deep, at most. Consider refactoring the code if you need to nest 4 or more levels.

  <!-- Consider this markup -->
  <div class="elm">
    <h2 class="site-title"><a class="site-title-link" href="#">Link</a></h2>
  </div>

  // Bad
  .elm {
    h2 {
      a {
        color: $white;

        &:hover {
          color: $black;
        }
      }
    }
  }

  // Good
  .site-title-link {
    color: $white;

    &:hover {
      color: $black;
    }
  }