Which units of measure do you use and why in CSS?

Nick Taylor - Oct 23 '18 - - Dev Community

I just opened an issue in the dev.to repo in regards to considering standardizing units of measure in the CSS part of the codebase. In a nutshell, I'm promoting the usage of rem (and em when necessary) like I use in my day to day at work as I'm sold on rem.

Consider using rem units #987

Is your feature request related to a problem? Please describe. This relates to #966

I noticed in most of the SASS files something that should be addressed. font-sizes and other properties with measurement values are set as em, px, %.

Describe the solution you'd like

Consider using rem (and em when necessary). Browsers by default consider 1rem to be 16px on the root element, but if a user has different font settings, that 1rem will be equal to that value. So using rem, everything will be sized based off of the browser's or user's font-size setting. em is also useful when whatever is being sized is dependent on its element's font-size, not the root element's font-size.

There’s a great discussion in the Bootstrap repo about all this, Why has Bootstrap 4 changed to using rem? · Issue #19943 · twbs/bootstrap · GitHub. This is a good comment in there, https://github.com/twbs/bootstrap/issues/19943#issuecomment-224439306

It’s not a quick simple fix, but given this is OSS, I’m sure there would be many that could help with this.

Side note: I think this could be a great issue that could be done with mentors/mentees that are interested in CSS.

Describe alternatives you've considered N/A

Additional context

image

image

There are many articles that have discussed this in detail. A simple Google of "rem vs." will provide you with an abundance of articles.

screenshot of a Google search on

I'm curious what everyone's thoughts are on this. Feel free to comment here as well as in the GitHub issue.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .