My inevitable takeaway fro great articles like this is: wat?
Why is it hard and obscure by default? I really do appreciate these articles but MAN. How many smart people spin their wheels rediscovering subtle-but-important nuggets of wisdom like this? Better defaults - please!
(I realize this is very meta and not speaking specifically to this article)
Comment about actual article: I think I prefer the “calc” approach to the css variables approach in the Quality of Life bonus section. IDK, it’s a matter of preference, and I appreciate that multiple approaches were compiled.
Because we learn from experience. em probably would’ve been designed like rem if we had several years of experience working with it before the spec was designed, but we didn’t. The designers took their best guess, people used it for years, we learned what worked and didn’t, we improved the spec, now we share the new knowledge. We’re not going to get them all right on the first try.
I don’t think you can fix “you need to think about and test your code” with different ‘defaults’. Sometimes a bad practise becomes so common that browsers implement stuff to paper over it (like the zoom function multiplying even pixel values these days…)
There are definitely times when px is the right value. Usually with a max-width and usually when a raster images involved.
Most of the examples of px in this article are better served by some combination of %, em, vh/vw
px is great for setting minimum margin sizes. You don’t want your margins to scale with zoom, or text will get progressively narrower. They’re also good for border widths.
Usually you want margin in % or vh/vw to scale wit the amount of space available. Anything in px makes assumptions about viewport size, etc
I was referring to minimum margin sizes, for narrow screens. Just big enough to keep clear of tap targets like overlay scrollbars.
They work well in combination with a maximum content width for wide screens.