A Cheat Sheet for CSS units
Tags: react, css, javascript, design
Published: 2021-11-11 10:55:34

_This is an opinionated take on when to use each CSS unit, feel free and encouraged to disagree and make an argument on that, if that's the case._

## TL;DR

**REM**
- font-size
- spacing
- border-radius

**EM**
- letter-spacing
- media-queries

**PX**
- border-width
- shadows

**Other Units**
- z-index (integer)
- line-height (integer)
- sizes (%)

## CSS units

Have you ever wondered what CSS units to use on any specific case? If so, this cheat sheet will be definitely useful for you! 

There are `em`, `rem`, `px` and many other units out there, and we always want to apply what's described as a "best practice". That's why I came up with this cheat sheet, this is something I look up for whenever I need to come up with a new `theme` or new `design tokens`.

_Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. - by [Adobe](https://spectrum.adobe.com/page/design-tokens/)_

## REM

`rem` is a relative CSS unit that scales with the root element's font size. Meaning, that it uses the  font-size that defined under the `html` tag to be calculated.

>_Why is this unit useful?_

The main purpose of `rem` units, is related with its scaling with the document's font-size, meaning that if a user **updates the font-size on the browser settings** (yes, that's a thing), and if the typography is defined with `rem` units, everything will scale as it is meant to!

>_In which scenarios should I be using `rem` then?_

You could think of this, as "whenever I want things to scale, based on the font-size". In the end, these are the `design tokens` where you should be using this unit:

- **Font-size** - So that font-size scales with the defined font-size settings by the user.

- **Spacing** - Inside this `design token`, lives all the CSS properties that add any sense of spacing between elements, like `margin` or `padding`. And for these, I find it useful to have it scaling with the root's font-size, so that the same visual and hierarchy effect is shown to the user.

- **Border-radius** - This unit makes most sense to be in `rem` because the "box" elements that have it defined, are usually wrapping content that is also defined in `rem`, making it then convenient to have this "rounded" effect scaling with font-size also.

## EM
`em` is a relative CSS unit that scales with the parent element's font-size. Meaning that if an element has a font-size of `2em`, it will be the double of it's parent.

>_Why is this unit useful?_

`em` units are useful when you want to have something to scale depending on the currently defined font-size. Icons are good example of this, most times you will want your icons size to be relative to whatever is the font-size defined on the context they are placed.

>_In which scenarios should I be using `em` then?_

There aren't many scenarios in which this unit is useful, it's mostly when you want properties to scale depending on the context's font-size.

- **Letter-Spacing** - `letter-spacing` as the name indicates, is correlated with the letters them selves, and as such it should scale with whatever is the defined font-size for this parent's element.

- **Media Queries** - For multiple reasons that I won't enter in detail, `em` is the most consistent unit when it comes to media queries and works pretty well across all browsers. You can read more about this topic in this thorough [blog post](https://zellwk.com/blog/media-query-units/).

## PX

`px` has been the most commonly used CSS unit when it comes to web development. It is an absolute unit, and `1px` represents 1/96th of 1 inche.

>_Why is this unit useful?_

`px` units are useful when you want to have something to be static and not change depending on factor's like the defined font-size.

>_In which scenarios should I be using `px` then?_

This unit is the clear winner when it comes "let's build this fast and not put much thinking into it". But in fact, there aren't that many useful scenarios in which you should be using this unit.

- **Border-width** - As far as borders goes, you usually just want them to add some kinda of emphasis or to separate contexts, so you really don't need them to scale depending on anything.

- **Shadows** - We usually use shadows to give a sense of elevation or to create some type of stacking, and that's another thing where we don't need things to scale.

## Other units

For the particular use case of defining values for `design tokens` like `z-index`, `line-heights` or `sizes`, I tend to not use any of the units above, and use the following "miscellaneous" instead:

### Integer number

- **Z-index** - For this CSS property, your only shot it so use an integer number, so there isn't much to say in that regard.
- **Line-height** - Line-height's value depends on the defined font-size to set it's value, similar to how the `em`  unit works. But there is no need to specify any CSS unit, as specifying an integer number like `line-height: 2;` will lead to a line-height value, that is the double of the font-size.

### % value

- **sizes** - This design token includes `width` and `height`, and having pre-defined % values like `width: 50%` or `height: 75%`, is usually what I tend to find the most useful.

## Conclusion

In today's web development using `px` as a CSS unit for every other property isn't really a choice if you wanna makes thing right by your users.

Users should have the **option to update their browser settings** and still have a pretty good experience on your website, with that in mind, make sure you are using **the appropriate CSS units** for each property, and deliver an awesome experience!