Probably because I learnt most of my CSS long before rem was invented, I tend to reach naturally for em and only use rem when I specifically need it. I think rem is naturally easier for beginners to understand and fits better into a twitter-bootstrap or BEM organised way of styling, where the structure of the DOM document is downplayed as much as possible.
But if you believe in exploiting the richness of selectors and the structure of the DOM in your styling, then the em unit comes into its own. For example suppose you have some auxiliary content to the main content of your page. On a desktop, you might decide to present this in a sidebar. Because it's auxiliary content on a large pixel width display, you want to use a smaller font for the contents of the sidebar than the main content, so the eye isn't attracted to it so much. So you use em for all the descendant elements of the auxiliary content container, which are therefore ultimately all relative to the font-size defined for that auxiliary content container.
Then, for the rendering on a mobile, you decide that a sidebar doesn't work, and instead the auxiliary content should be displayed below the main content. In this case, you decide that don't want to use a smaller font than the main content. All you need to change for your font size in your media query is the font-size of the auxiliary content container, and everything will adjust itself appropriately. If you had used rem instead, that wouldn't have been possible.
Very good point. If I were working on a project of my own, I'd probably be more inclined to use em for things of that nature. Thanks for sharing that better use case for em!
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.
Probably because I learnt most of my CSS long before rem was invented, I tend to reach naturally for em and only use rem when I specifically need it. I think rem is naturally easier for beginners to understand and fits better into a twitter-bootstrap or BEM organised way of styling, where the structure of the DOM document is downplayed as much as possible.
But if you believe in exploiting the richness of selectors and the structure of the DOM in your styling, then the em unit comes into its own. For example suppose you have some auxiliary content to the main content of your page. On a desktop, you might decide to present this in a sidebar. Because it's auxiliary content on a large pixel width display, you want to use a smaller font for the contents of the sidebar than the main content, so the eye isn't attracted to it so much. So you use em for all the descendant elements of the auxiliary content container, which are therefore ultimately all relative to the font-size defined for that auxiliary content container.
Then, for the rendering on a mobile, you decide that a sidebar doesn't work, and instead the auxiliary content should be displayed below the main content. In this case, you decide that don't want to use a smaller font than the main content. All you need to change for your font size in your media query is the font-size of the auxiliary content container, and everything will adjust itself appropriately. If you had used rem instead, that wouldn't have been possible.
Very good point. If I were working on a project of my own, I'd probably be more inclined to use
emfor things of that nature. Thanks for sharing that better use case forem!