Hacker News Reader

Comment by JoshuaRLi | Hacker News Reader

I definitely considered this! But rem feels more predictable and straightforward. I have seen debates on em vs. rem, and there is certainly value with em in websites that have lots of nested and/or discrete responsive components, but for a very simple site, I quite like rem.

View on HN

Ue rem when your reference is the base page. Use m when the refrerence. is surrounding text.

As examples, I size page elements in rem, but text elements (usally), in em.

My main, content, article, header, footer, and aside should all generally reference page, and are in rem.

Main body text width, headings (h1 ... h6), super- and sub-scripts, code and pre blocks (often jarringly sized by default) reference the containing unit and should be in em units. Also, generally, figure and table captions, table text, etc.

I prefer to give figure or sub-element (tables, callouts, note boxes, etc.) margins and paddings in em as well.

In my opinion em would be more predictable. With the current configuration, users of this package would only be able to adjust the font size by setting font-size on the html element, but not on the body element or any container elements of the main element, or even the main element itself. That is pretty confusing to me, I think it is a pretty typical expectation that making the font size of a container bigger or smaller should always make everything inside proportionately bigger or smaller.

Are you sure you don't have the meanings reversed? REM is the one that ignores nesting. EM doesn't, so on a simple site it's easier to use correctly.

I'm sure. For that reason (ignoring nesting), I think rem is easier to use correctly. I think what you're getting at is that simple sites have little nesting, therefore em, but I'm thinking about in terms of em being great for say, css framework developers.

Depends on context and reference: https://news.ycombinator.com/item?id=19608806

Reply on news.ycombinator.com