Comment by hollowturtle
3 days ago
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
Grid is a DSL certainly, but it's a very useful DSL to learn. I'd even argue that people skip Flexbox or forget everything they (think they) know about Flexbox and just learn CSS Grid.
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.
thanks for the lesson, not needed because i know how to do a multiplication, but oh well people need to flex their domain knowledge. You're missing the whole point: drid dsl is overengineered and convoluted with browser behaving differently on some cases. Css is a disease
Put me on a C++/asm project and I'd have a hard time making heads or tails of it. So what? Your comment comes off as very angry without any meaningful critique of the article's central topic other than you had a hard time understanding it.
1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. If you don't know what the value is it only takes a minute to find out. If you're writing CSS that'll be used on unknown pages, you either a) shouldn't care and just scale relative to whatever root font size the consumer set or b) should set your own size/scale, at build time or with custom properties. REMs have been around and standard practice for 10 years.
> 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site.
That's not true, first of all the root font size might not be immediate to query and find out what it is, second it might change because of variables on the root or base font size might be percentage/rem based itself not necessarily in pixels and finally setting it in pixels doesn't take into consideration zoom levels, or OS-level font settings.
> REMs have been around and standard practice for 10 years.
I know but thanks for flexing it out, in fact I'm arguing that css is and has been bad for many years
My point was that there is only one root font size on a given page and it's trivial to find out what that is by looking in dev tools. It does not matter if it was set by the browser's user-agent stylesheet or an authored stylesheet or what units it was set in. You can simply look up its computed value.
What use case is that not sufficient for? What kind of nightmare page are you styling where code you don't control is dynamically changing the root font size? Why do you need its exact computed value at all? The whole point of REMs is to style based on relative proportions to the text size e.g. when text is size X, buttons should have x padding on top/bottom and 2x on the sides. If the user sets their preferred font size to another value I do not care.
1 reply →