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
There are many articles that have discussed this in detail. A simple Google of "rem vs." will provide you with an abundance of articles.
I'm curious what everyone's thoughts are on this. Feel free to comment here as well as in the GitHub issue.
Latest comments (30)
I personally use
emandrema lot. But there are cases and cases.Let's restrict to just length measures. I personally use:
pxfor border widths, specifically one pixel borders, which are always rendered crisply in most use cases;emfor typographical spaces: box padding, margins, borders radii and shadows (when they make sense, i.e. inline components), larger border widths, (usually minimum) widths of text content boxes;remfor layout components (wrt sizes, margins, padding, border radii, box shadows);vwandvh) for precise layout displacement, or relative font sizing;cmormmfor printing.Rather than repeat myself:
Use
rem.Here's how, and why:
stackoverflow.com/a/43131958/497418
html {
font-size: 16px;
}
and use rem ?
The most sensible one. If an input field needs a padding of one character, I use 1ch, if there are non-scaling measures, it's px... I think one of the really fun things about CSS are all those quirky units.
What ruler tool are you using? Mine doesn't have the pixel value summed in the middle like that but I wish it did.
I'm using xScope, xscopeapp.com. It has a tonne of other tools as well. 🔥
Neat, Thank you! ⭐⭐⭐⭐⭐
Use what's appropriate. There's several unit types for a reason!
For text I prefer rem. I don't know any cases where the font size being dependent on the parent's font size would have been useful for me. Usually it ends up producing unexpected effects (this text should be 60px, why is it 48px? I have to keep going up until I find it...) And if there were a use case for making a nested container a different font size, I could make a more specific CSS rule instead.
~All units have their purpose, so, all.
lol its not such a trivial point as other posters suggest in jest, I am more comfortable and familiar with em, but agree that we need to move past the measurements that are not professionally relevant and clean up the code base of its manifold uselessness before it becomes akin to the common law in its esoteric complexity. Such a range of potentialities simply makes it harder to learn/debug/maintain and so we should work towards a better civil law like form.
EDIT: Why I use EM, the conversion is easy to do in my head and I never llooked up the REM conversion due to the academic environment I learned to use it in preferring the EM units. Upon doing some inspections, I am not firm on the point and would concede to REM for its wider adoption if there was to be a standard.
Though the country is not run by the President, whatever your opinion of him. We haven't nearly an impulsive form of government in the United States as our alarmists or those not versed in the divisions of power abroad ever seem to realize, despite being relatively intelligent otherwise :]
I also use
em,px, and occasionally%. What's the greatness ofrem? Never really seen them explained.None if you don’t change the root font size