From the example: .grid {
display: grid;
grid-template-columns: 35% 1fr 1fr 1fr;
}
.grid header {
grid-row: 1 / 3;
}
.grid ul {
grid-row: span 2;
grid-column: span 3;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
I swear you that I had less hard time reading x86 assembly code or even c++ templates. I mean what the hell? Then if you go look at another example:> @media (max-width: 32rem) I know what rem means, I just don't know what the hell MAY mean, that alone in a big project will make you hate your job as sometimes it's more easier predicting what the response of an LLM may be than what styling an element will have on a live page [Edit] I'm not confusing rem with em, em are even worse, but still hard predicting what a rem might be, before arguing we shouldn't I'd like to stress out we should once it's used like that "@media (max-width: 32rem)" [Edit2] Instead of just downvoting why don't you reply with your counter arguments? I really am interested in hearing what you have to say |
One of the first callouts in the article is a suggestion to read the same site's interactive guide to CSS Grid if you aren't familiar with it: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
> I'm not confusing rem with em, em are even worse, but still hard predicting what a rem might be, before arguing we shouldn't I'd like to stress out we should once it's used like that "@media (max-width: 32rem)"
`rem` is "just" the root Em, the em in the root font size (the font size of the `<html>` tag itself). In most browsers, with no `<html style="font-size: X;">` override (or `:root { font-size: X; }` stylesheet) that defaults to 16px.
In the Bootstrap 3/4-era responsive breakpoints you often see something like `@media (max-width: 512px) {}` to mean "mobile width". The reasons to migrate those sort of breakpoints to `rem` units instead include 1) adapts to custom browser settings (a user may set their default font size larger, for instance, for visual acuity reasons, which can be a useful accessibility desire), 2) adapts in some situations to zoom settings (browsers are allowed to style the website at a higher zoom as if the user had chosen an equivalent larger base font size), and 3) in the "retina screen" world where resolutions on a phone screen may be higher than desktop resolutions despite smaller screen size, using "roughly 32 `M` characters wide" is a better intuition than "exactly 512px wide" (and mobile browsers can lie a bit less about their pixel widths to meet your breakpoint assumptions).
You can back-of-the-envelope math `X rem * 16 px/rem` to get a pixel approximation if you need one, and that estimate will hold in a lot of cases in a majority of browsers, but leaves the browser more flexibility in adapting to adapting to user desires and hardware quirks than raw pixel counts.