Units

Measurements

• Use rem units for font sizes with a px fallback. This can be done with the following mixin:

  @mixin font-size($sizeValue: 1.6) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
  }
  

• Set the HTML font size to 10px to ensure that 0.1rem equals 1px.

  html {
    font-size: 10px;
  }
  

• Use em units for positioning.

• Use percentages when layout components stay relational to each other (e.g. a main content area that takes up 75% of the screen and a sidebar that takes up 25%).

  // Good
  .panel-a {
    width: 25%;
  }
  
  .panel-b {
    width: 75%;
  }
  

• Use px units for when a measurement shouldn’t change based on user set font size or browser zooming or for when requiring pixel values below 5.

  // Bad
  selector {
    border-width: 55px;
  }
  
  // Good
  selector {
    border-width: 2px;
  }
  

• Use unitless values for line-height as this will inherit values from the font-size.

• Use up to 10 decimal places in em units to ensure accuracy.

  // Good
  .body_copy {
    @include rem-font-size(1.4);
    // Line height will now be 1.8 of 1.4rem, or 2.5rem.
    line-height: 1.8;
  }
  
  // Good
  .container {
    height: 12em;
    margin-left: 10.6666666667em;
    width: 82.5%;
  }
  

• Do not use a unit with 0.

  // Bad
  width: 0px;
  
  // Good
  width: 0;
  

• Always use a unit for dimensions, margins, borders, padding, and typography.

  // Bad
  border-width: 12;
  
  // Good
  border-width: 12px;
  

Colors

• Use hex notation first, or then rgb(a), or hsl(a).
• Both three-digit and six-digit hexadecimal notation are acceptable.
• When denoting color using hexadecimal notation, use all lowercase letters.
• When using HSL or RGB notation, always add a single space after a comma and no space between parentheses and content.

// Bad
color: #FFF;
color: rgb( 255, 0, 0 );

// Good
$light: #fff;
color: $light;

// Good
$primary: #fe9848;
color: $primary;

// Good
$secondary: rgba(255, 100, 255, 0.5);
color: $secondary;

• If you use an rgba rule, include a fallback value in hexadecimal.

  // Good
  .illustration {
    background-color: #eee; // fallback
    background-color: rgba(221, 221, 221, 0.75);
  }