Exactly why do we need to use ems?

Some times you want your text to be relative to the size of its parents. To be honest, I kinda find it silly, considering if a developer comes back and has to update code, they may edit it to the point that it causes undesired results.

HOWEVER, I do see the point in REMs. rem is a unit that is relative to the document's font-size, which you can set yourself. Some browsers may or may not choose to override that, inwhich it may be for a valid reason. Using rem can help your code stay relative. For example, a special needs visual screen reader may zoom in for the visually impaired and maybe it'll react better. rem is a good way to remain relative to one value where em stays relative to its parent.

Another moment to be honest.....it's more important to stay consistent. Code looks cleaner that way and people get less confused when attempting to read it.

So when you create the site from scratch, use whatever unit you like, such as px. But when working on a project that someone else started, follow their lead and use whatever unit is there. There could be a peice of js that does a calculation based on the unit type. maybe. who knows.

I usually use em's and %'s where possible for measurements, just keeps things relative and seems fairly easy to me.

If I'm setting pixel values for much other than @media (min-width: __px), I feel like I'm being lazy or doing something wrong.

There are some cases, where things should have a relation to the actual font-size. For example you are using an icon which is scalable (for Example SVG or iconfont). It would be nice, if this icon would scale in relation to the text-size. So I recommend to set the icon size in em.

And as general answer, all things that should scale in relation to its parent font-size - use em.