# CSS units
Recommendations of unit types per media type:

Media | Recommended | Occasional use | Infrequent use | Not recommended
:--- | :--- | :--- | :--- | :---
Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc
Print | em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax

## Absolute units
Absolute length units should rarely be used, since their calculated values
don't adjust to their contexts.

Unit | Description
:--- | :---
px | pixel (a dot on the computer screen)

## Relative units
[Relative units](http://www.w3.org/TR/css3-values/#font-relative-lengths)
play nicely with both screen and print media types and should be
the most frequently used CSS units.

Unit | Description
:--- | :---
% | percentage, relative to inherited value
[em](http://www.w3.org/TR/css3-values/#em-unit) | relative to font size of the element
[rem](http://www.w3.org/TR/css3-values/#rem-unit) | relative to font size of the root element
[ch](http://www.w3.org/TR/css3-values/#ch-unit) | relative to width of the "0" (ZERO, U+0030) glyph in the element's font
[ex](http://www.w3.org/TR/css3-values/#ex-unit) | relative to x-height of the font

## Physical units
[Physical length units](http://www.w3.org/TR/css3-values/#absolute-lengths)
should only be used for print style sheets, never for the screen.

Unit | Description
:--- | :---
cm | centimeter
mm | millimeter
in | inch (`1in` equals `2.54cm`, `72pt`, and `6pc`)
pt | point (`1pt` equals `1/72in` and `1/12pc`)
pc | pica (`1pc` equals `12pt` and `1/6in`)

## Viewport units

[Viewport-percentage length units](http://www.w3.org/TR/css3-values/#viewport-relative-lengths)
should be used with caution, as there is still some
[lingering bugs with their implementation](http://caniuse.com/#feat=viewport-units).

Unit | Description
:--- | :---
[vw](http://www.w3.org/TR/css3-values/#vw-unit) | relative to 1% of viewport's width
[vh](http://www.w3.org/TR/css3-values/#vh-unit) | relative to 1% of viewport's height
[vmin](http://www.w3.org/TR/css3-values/#vmin-unit) | relative to 1% of viewport's smaller dimension
[vmax](http://www.w3.org/TR/css3-values/#vmax-unit) | relative to 1% of viewport's larger dimension

# Contexts

## Document-level
Adjust the root font size in order to make relative units (e.g. `em` and `rem`)
based on a `10px` scale (i.e. `1em` and `1rem` equals `10px`),
rather than a typical `16px` scale.

```css
html {
  font-size: 62.5%;
}
```

## Borders
Most likely use `px`, as most of the time, the border shouldn't need to scale.
```css
.Component {
  border-bottom: 1px solid #ccc;
}
```

## Font-size
Font-size should only be applied at the lowest possible child elements,
in order to minimize its cascading impact on relative units.
While both of the following two examples are essentially equivalent,
only the first is recommended.

**DO**:
```css
.Component {
}
.Component-heading {
  font-size: 1.2em;
}
.Component-body {
  font-size: 0.9em;
}
```
**DO NOT**:
```css
.Component {
  font-size: 1.2em;
}
.Component-heading {
  font-size: 1em;
}
.Component-body {
  font-size: 0.75em;
}
```

## Padding and margin
In order to ensure consistent use of whitespace throughout the application,
given a component could be used in a variety of contexts,
it may be best to use `rem` for margin and padding than `em`.

```css
.Component {
  margin: 1rem 0;
  padding: 1rem;
}
```

## Media queries
[Only use `em` within media query definitions, never pixels](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).

Until there's wider [`rem` support within media queries](http://fvsch.com/code/bugs/rem-mediaquery/),
[`rem` should be avoided in media queries as well](http://codeboxers.com/em-vs-px-vs-rem-in-media-queries/).

```css
@media (min-width: 20em) {
  .Component {
    background-color: blue;
  }
}
```