Can we talk about the 'use rems not ems' advice I got from a senior dev?

A guy I worked with at a small agency in Austin told me to always use rems and never ems for font sizes. I followed his advice for 6 months until I needed to build a complex card component with nested text. The rem approach meant I had to write like 20 extra lines of media queries for each level. Switching back to ems for that one component cut my code by half. But now I'm wondering if I just got lucky or if ems actually have a place in modern CSS. Anyone else run into a situation where the 'rule' didn't hold up?

2 comments

2 Comments

sam_harris683d ago

Did that senior dev ever explain why he was so against ems, or was it more of a blanket rule he picked up somewhere? I've seen that kind of advice passed around like it's gospel, but it usually falls apart the second you need to build anything with real depth to it. Your card component is a perfect example where ems actually do what they're supposed to do, which is scale everything relative to the parent. The whole rems vs ems thing is less about one being better and more about knowing when each tool actually makes your life easier instead of harder.

blaker753d ago

Gotta push back a bit on @sam_harris68 because ems actually scale based on the parent's font size, not the element itself, which is where people trip up. That said, your card component story is exactly why blanket rules like "never use ems" are dumb. Ems are perfect for components that need to scale together, like a button with padding and font size that both grow when you change one value. The real trick is using rems for your global layout and typography, then switching to ems inside specific components where relative scaling matters. That senior dev probably got burned by nested ems once and swore them off forever, which happens to all of us at some point lol.