I'm a full-stack Software Engineer and Architect. I specialise in front-end niceness, but my daily tasks are mostly about making server less work well and scale within our suit of micro services!
Nice article - clamp is the single biggest tool to use in the box here. I find working with grids a pain in the butt, compared to flex.
However...
This is not against you, so please don't take it as a personal criticism. Because everyone makes this mistake. But people who write about CSS really gotta stop writing this nonsense about EMs and REMs.
EMs are a nightmare to work with specifically because they are a proportion of their parent element and in the simple example, it's too much to really have to comprehend when writing clean styles
<div style="font-size: 20px;">
<div style="font-size: 50%;">
<div style="font-size: 200%">
<p>bizarrely, I'm 20px in size</p>
</div>
</div>
</div>
So you revert to REM? But REM is literally bound to a root value, (usually 16px as default, commonly reset to 10px by :root { font-size: 62.5% }.)
This nonsense about 'herp, derp, are you still using pixel sizes' -- well, newsflash, using REM is just the same as using an explicty pixel size as far as I can tell. You just write it in a different format.
The REAL reason for using REM is to tie to your measurements to a single base size in a way that means a change to the root size would cause your UI to scale nicely in a proportional way.
I would like to hint you that making your font-size explicitly with 'px' values and not say REMs or EMs would make your user's browser typography preference overruled. Meaning that there would be no scaling of your font-sizes if the user chose to do so in the browser settings. So, it's always better to use resizible units like REMs unless you want something to have the same font size no matter the user's preference.
Comment marked as low quality/non-constructive by the community. View Code of Conduct
I'm a full-stack Software Engineer and Architect. I specialise in front-end niceness, but my daily tasks are mostly about making server less work well and scale within our suit of micro services!
The REAL reason for using REM is to tie to your measurements to a single base size in a way that means a change to the root size would cause your UI to scale nicely in a proportional way.
Your original comment makes little sense to me then. Why make an obvious point about the difference between EM and REM when the author quite literraly stated the fact that EMs should generally be avoided and REMs should be used instead. You then go on about saying REMs and PX values are just the same..when in reality they aren't, simply 'couse of the fact that REMs are scalable and PX are not. They are only the same when looked at from coding perspective...not to the browser and users who alter their settings only to find out, to their dissapointment, that the UI hasn't changed. I'd kindly advise you to edit your comment accordingly and not to restate what author had already stated in the blog b'couse it leads to unnecessary confusion for the readers.
Ty and wish u successful coding. Sry for the long comment :/
Frontend developer by day, iOS developer by night. Currently working on learning iOS development and my own blog, Mike Decodes, where I'm decoding the tech industry. Come hang out with me on Twitter!
This nonsense about 'herp, derp, are you still using pixel sizes' -- well, newsflash, using REM is just the same as using an explicty pixel size as far as I can tell. You just write it in a different format.
This is only true if you set the base value to be a pixel value. Ideally you wouldn’t touch it and allow the user to decide the base size. This is 16px by default but fully depends on the size of the text a user has selected.
This is great because larger text requires more whitespace, which is exactly why you would use REM for spacing as well because it scales with the font size of the user!
The mistake developers make is setting the base REM value to be a hardcoded value.
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice article -
clampis the single biggest tool to use in the box here. I find working with grids a pain in the butt, compared to flex.However...
This is not against you, so please don't take it as a personal criticism. Because everyone makes this mistake. But people who write about CSS really gotta stop writing this nonsense about EMs and REMs.
EMs are a nightmare to work with specifically because they are a proportion of their parent element and in the simple example, it's too much to really have to comprehend when writing clean styles
So you revert to REM? But REM is literally bound to a root value, (usually 16px as default, commonly reset to 10px by
:root { font-size: 62.5% }.)This nonsense about 'herp, derp, are you still using pixel sizes' -- well, newsflash, using REM is just the same as using an explicty pixel size as far as I can tell. You just write it in a different format.
The REAL reason for using REM is to tie to your measurements to a single base size in a way that means a change to the root size would cause your UI to scale nicely in a proportional way.
I would like to hint you that making your font-size explicitly with 'px' values and not say REMs or EMs would make your user's browser typography preference overruled. Meaning that there would be no scaling of your font-sizes if the user chose to do so in the browser settings. So, it's always better to use resizible units like REMs unless you want something to have the same font size no matter the user's preference.
What did you not get about:
EMs are just recipes for disaster.
Your original comment makes little sense to me then. Why make an obvious point about the difference between EM and REM when the author quite literraly stated the fact that EMs should generally be avoided and REMs should be used instead. You then go on about saying REMs and PX values are just the same..when in reality they aren't, simply 'couse of the fact that REMs are scalable and PX are not. They are only the same when looked at from coding perspective...not to the browser and users who alter their settings only to find out, to their dissapointment, that the UI hasn't changed. I'd kindly advise you to edit your comment accordingly and not to restate what author had already stated in the blog b'couse it leads to unnecessary confusion for the readers.
Ty and wish u successful coding. Sry for the long comment :/
This is only true if you set the base value to be a pixel value. Ideally you wouldn’t touch it and allow the user to decide the base size. This is 16px by default but fully depends on the size of the text a user has selected.
This is great because larger text requires more whitespace, which is exactly why you would use REM for spacing as well because it scales with the font size of the user!
The mistake developers make is setting the base REM value to be a hardcoded value.