# CSS Units

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 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

Unit | Description
:--- | :---
% | percentage
[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
The following [physical 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
In order to make relative units (e.g. `em` and `rem`) based on a `10px` scale,
rather than a `16px` scale (ord)

```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.

**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;
}
```

## Media queries
In the document root,

## Padding and margin
In order to ensure consistent use of whitespace throughout the application,
its best to use `rem`.

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