Style Guide

Principles

• Keep it simple and reuse as much as possible.
• Code that looks like it was written by one person.
• Write for scalability.

Structure

General

• We use BEM as a code creation methodology.
• File names in plural (Example: buttons.scss)
• Classes in singular and lowercase (Example: .gallery__button)
• Name images relative to their block. (Example: hero_background.png)

Syntax

1. Space after the selector and before {}
2. Spaces for indentation.
3. Space after the :
   1. CSS blocks separated by 2 lines
   2. Avoid nesting abuse. Limit 1 level
   3. Mixins for size, styles, and numerical font values.

Property Management

Properties and selectors should be sorted as follows:

• Box model properties (display, width, height, margin, etc)
• Positioning (position, left, top, right, etc)
• Typography (text-transform, text-decoration)
• Decoration (background-image, color, etc)
• Variables
• Mixins

Code Example:

.button {
  padding: 20px 30px;
  display: block;
  position: relative;
  width: 220px;
  height: 40px;
  text-transform: uppercase;
  font-weight: $semibold;
  color: #ffff;
  background-color: #333333;
  @include font-size(13px);
}