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!
But it's so annoying ?!
Yep, using rem will make the development process longer because we need to calculate the rem value.
This doesn’t make sense. Only if you set the root font size to 20px. Set it to 62.5% which usually means ~10px then you can use a very clear and intuitive 1.5rem = 15px etc. It takes 0 reasoning time
Do we really can't use px anymore?
Awkward… I think you mean ‘We really can’t is px anymore?’ - you don’t need a ‘do’ here
Em stands for "parent element's font-size"
Not just the parent… it’s closest common ancestor with any explicit font size value. So even if it’s container or container’s container had an explicit font size set, it will use that value
This doesn’t make sense. Only if you set the root font size to 20px. Set it to 62.5% which usually means ~10px then you can use a very clear and intuitive 1.5rem = 15px etc. It takes 0 reasoning time
not really a fan about this, because in designing usually we use 8px grid, so sticking to 16 probably will make the design more consistent. Using 10px rem hack will make the numbers awkward (0.8rem, 1.6rem), I rather use (0.5rem, 1rem).
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!
Hmmm, you simultaneously complain about 'slowing down the development process' with 'difficult maths' but you won't make it easier for yourself to know exactly what the REM refers to...
Cool! Looking forward to see a blog/your work with that approach. By the way, using the 62.5%, do we have to redeclare all default font sizes? Considering that now the p default font size is 10px.
My approach for a while has been:
:root { font-size: 62.5% }
body { font-size: 1.6rem }
That way the user can still change the browser’s font size if needed, Rems are easy to reason on (1rem = 10px) AND all you still have the 16px default size.
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!
There is no standard lol the only baseline is that generally the browser starts at a 16px size. Each library or reset or normalize you use is just normal css someone wrote. They had to make a decision with this root font size but from what I’ve seen most just leave it at the default.
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!
Who said anything about 'normalize' or'resets'? Not sure it was ever related to a CSS reset. 16px is an awkward unit to reason about. When I said 'standardised', perhaps 'convention' would have been more reasonable -- an approach adopted by many many developers.
Just do a search for css 62.5% and you'll find tons of articles about the technique, dating as far back as 10 years ago. , just another thing in a front-end devs toolbox to speed up development and forget about it.
I bring up css libs and resets because a lot of devs (particularly newer devs) use them and likely assume that whoever made it "is doing it right". I wanted to point out that this assumption isn't true in this case (and many others).
I agree its a convention but not one set up default anywhere.
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.
This doesn’t make sense. Only if you set the root font size to 20px. Set it to 62.5% which usually means ~10px then you can use a very clear and intuitive 1.5rem = 15px etc. It takes 0 reasoning time
Awkward… I think you mean ‘We really can’t is px anymore?’ - you don’t need a ‘do’ here
Not just the parent… it’s closest common ancestor with any explicit font size value. So even if it’s container or container’s container had an explicit font size set, it will use that value
Careful, because that will catch some people out.
thanks for the addition!
not really a fan about this, because in designing usually we use 8px grid, so sticking to 16 probably will make the design more consistent. Using 10px rem hack will make the numbers awkward (0.8rem, 1.6rem), I rather use (0.5rem, 1rem).
Hmmm, you simultaneously complain about 'slowing down the development process' with 'difficult maths' but you won't make it easier for yourself to know exactly what the REM refers to...
Good luck with that!
Cool! Looking forward to see a blog/your work with that approach. By the way, using the 62.5%, do we have to redeclare all default font sizes? Considering that now the p default font size is 10px.
My approach for a while has been:
:root { font-size: 62.5% }
body { font-size: 1.6rem }
That way the user can still change the browser’s font size if needed, Rems are easy to reason on (1rem = 10px) AND all you still have the 16px default size.
Right. I thought this was standardised a while ago in this fashion
There is no standard lol the only baseline is that generally the browser starts at a 16px size. Each library or reset or normalize you use is just normal css someone wrote. They had to make a decision with this root font size but from what I’ve seen most just leave it at the default.
Who said anything about 'normalize' or'resets'? Not sure it was ever related to a CSS reset. 16px is an awkward unit to reason about. When I said 'standardised', perhaps 'convention' would have been more reasonable -- an approach adopted by many many developers.
Just do a search for
css 62.5%and you'll find tons of articles about the technique, dating as far back as 10 years ago. , just another thing in a front-end devs toolbox to speed up development and forget about it.I bring up css libs and resets because a lot of devs (particularly newer devs) use them and likely assume that whoever made it "is doing it right". I wanted to point out that this assumption isn't true in this case (and many others).
I agree its a convention but not one set up default anywhere.