CSS Units Best Practices

css-units-best-practices.md

CSS units

Recommendations of unit types per media type:

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

Relative units

Relative units play nicely with both screen and print media types and should be the most frequently used CSS units.

Unit	Description
%	percentage, relative to the same property of the parent element
em	relative to font size of the element
rem	relative to font size of the root element
vw	relative to the width of the viewport (100vw = viewport width)
ch	relative to width of the "0" (ZERO, U+0030) glyph in the element's font, only useful for number tables.
ex	relative to x-height of the font

Designing for mobile could use svh as smallest height of the viewport ex-address bar which hides when scrolling.

Absolute units

Physical units (e.g. cm, mm, in, pc, and pt) should only be used for print style sheets, while pixels (px) should only be used for the screen. While there are consistent conversions among all of these absolute length units, depending on the device, CSS units can actually mean different things. For example, while 1cm in CSS should print as one physical centimeter, there's no guarantee that 1cm in CSS results in one physical centimeter on the screen.

Unit	Description	cm	mm	in	pc	pt	px
cm	centimeter	1cm	10mm
mm	millimeter	1/10cm	1mm
in	inch	2.54cm	25.4mm	1in	6pc	72pt	96px
pc	pica			1/6in	1pc	12pt	16px
pt	point			1/72in	1/12pc	1pt	4/3px
px	pixel			1/96in	1/16pc	3/4pt	1px

Viewport units

Viewport-percentage length units should be used with caution, as there is still some lingering bugs with their implementation.

Unit	Description
vw	relative to 1% of viewport's width
vh	relative to 1% of viewport's height
vmin	relative to 1% of viewport's smaller dimension
vmax	relative to 1% of viewport's larger dimension

Contexts

Document-level

Assume the root font size is 16px but don't require it to be so. Either declare the font size as 100% or don't declare the font-size property at all.

html {
  font-size: 100%;
}

Borders

Most likely use px, as most of the time, the border shouldn't need to scale.

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

.Component {
}
.Component-heading {
  font-size: 1.2em;
}
.Component-body {
  font-size: 0.9em;
}

DO NOT:

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

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

Media queries

Only use em within media query definitions, never pixels. Until there's wider rem support within media queries, rem should be avoided in media queries as well.

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