I would recommend reading Josh Comeau's brilliant article[0] on this subject, I prefer his more intuitive approach for deciding when to choose `rem` or `px` for CSS values.
For example, from this Airbnb article:
> In the case of Airbnb, the team decided to prioritize the use of rem units specifically for font scaling, rather than scaling all elements proportionally.
This can lead to undesirable outcomes as sometimes spacing between elements can have a functional purpose, e.g. making it easier to vertically separate one paragraph from another. If you use `rem` solely for font-size and nothing else users with `32px` as their default font-size would not have the necessary amount of space to help discern one paragraph from another in this case.
PS It looks like they use Linaria, one can simplify the transition from `px` to `rem` by declaring this helper function and using inside their `css` rules:
p {
// This inline padding is for aesthetic reasons, we don't want this to scale
// with users preferred font-size
padding-inline: 16px;
// This serves a functional purpose, it will become `0.5rem 1rem`
// which should match `8px 16px` if users are using the default 16px font-size
margin-block: ${px(8, 16)};
For example, from this Airbnb article:
> In the case of Airbnb, the team decided to prioritize the use of rem units specifically for font scaling, rather than scaling all elements proportionally.
This can lead to undesirable outcomes as sometimes spacing between elements can have a functional purpose, e.g. making it easier to vertically separate one paragraph from another. If you use `rem` solely for font-size and nothing else users with `32px` as their default font-size would not have the necessary amount of space to help discern one paragraph from another in this case.
PS It looks like they use Linaria, one can simplify the transition from `px` to `rem` by declaring this helper function and using inside their `css` rules:
```ts
export const px = (...spacing: number[]) => spacing.map(s => `${s * (1 / 16)}rem`).join(" ")
// Example usage
const styles = css`
p { // This inline padding is for aesthetic reasons, we don't want this to scale
}````
[0] https://www.joshwcomeau.com/css/surprising-truth-about-pixel...