Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Formatting

Spacing

// Bad
.rule{
    margin:3px;text-align:center;}

// Good
.rule {
  margin: 3px;
  text-align: center;
}

.another_rule {
  margin: 3px;
}

Multiple selectors should each be on a single line, with no space after each comma, unless the selector is less than five chars.

// Bad
selector1, selector2 {
}

// Good
selector1,
selector2,
selector3 {
}

// Good
h1, h2 {
}

Property-value pairs

selector {
  name: value;
  name: value;
}

Spaces should separate values and operators in Sass expressions.

// Bad
selector {
  font-size: ($font-size+2em);
  font-size: ($font-size +2em);
}

// Good
selector {
  font-size: ($font-size + 2em);
}

Do not use shorthand declarations unless you need to explicitly set all the available values.

// Bad
margin: inherit 3em;

// Good
margin-bottom: 3em;
margin-top: 3em;

margin: 3em 4em 2em 1em;

Single-quote URLs and string values.

  background-image: url('/images/kittens.jpg');
  font-family: 'Helvetica', sans-serif;
  font-family: 'Lucida Grande', 'Helvetica', sans-serif;

Wrap numeric calculations in parentheses.

// Bad
.component {
  width: 100% / 3;
}

// Good
.component {
  width: (100% / 3);
}

Avoid arbitrary numbers that are repeated, or linked, or dependent on other parts of the code, (aka “magic numbers”).

// Bad
.component {
  top: 0.327em;
}

// Better
/**
 * 1. Magic number. This value is the lowest I could find to align the top of
 * `.foo` with its parent. Ideally, we should fix it properly.
 */
.component {
  top: 0.327em;
}

// Good
$align_top: 100%;
.component {
  top: $align_top;
}

Order

// Bad
.module {

  .module-element {
    color: #fff932;
  }
}

// Good
.module {
  .module-element {
    color: #fff932;
  }
}

// Good
.module {
  $amount = 3;
  @extend .component;
  @include sizing($amount);
  margin-top: $amount * 1em;
  text-align: center;

  @include media($small-screen) {
    margin-top: ($amount + 10em);
  }

  &::before {
    content: "hello";
  }

  .module__ele {
    color: #fff932;
  }
}

Notes

How to set text editors to 80 characters