What is a PX?

A pixel is a unit of measurement and a commonly used CSS unit. It is an absolute unit, meaning whatever value is assigned is fixed, regardless of the user setting one might have. Let's consider the following example:

html {

  font-size: 18px;

}

Here, we've changed the base-size to 18px by targeting the html tag. Most browsers will have a default base-size of 16px, unless you change that base by like we did above. It is this size that will become the basis for what relative units will calculate off of.

What is a REM?

REM is an acronym for root em and a unit that dictates the element's font size relative to the size of the root element. Due to our example above, let's continue with the assumption that our base size is still 18px.

If the base size(root element) is 18px, an element with the font-size value of 1rem will always the base size. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element.

To use the "rem" unit, you simply specify a value followed by the unit name:

html {

  font-size: 1rem;

}

Which should we use?

So to recap, one is an absolute unit(px) whereas the other is a relative unit, that will scale off of the base size of the browser.

So for defining font-sizes, in my opinion, you should mostly use rems as they are relative and it is a best practice in terms of accessibility.

As for the rest, the view is more nuanced so for properties like padding and border it's still down to preference. This is due to these two properties not being directly linked to accessibility like font-size is.

Summary

There's definitely a place for using pixels, and there will be edge cases where pixels might prove to be the better option. An example could be if a user is on a small screen and the use of rems could make the user experience worse due to the limited space.

If you're dealing with media queries or font-sizes, I'd go with rems. It's also easier to for the most part stick with one of them, with the occasional exception.

Another thing is that it makes sense to me that things should scale up or down at the same rate if there's a need for it. I'm therefore, personally, of the opinion that you should mostly use rems. There are however more factors at play than what is covered here. You can read more about it in this great article - https://zellwk.com/blog/media-query-units/ by Zell Liew

Follow for more content and a Happy New Year to you and your loved ones!