Both em and rem refer to element sizing. Rem is relative to the base page font size, while em is relative to the containing element font size.

The consequence is that nested em specifications are cumulative; 1.2em of 1.2 em of 1.2em gives 1.2^3, while 1.2 rem is fixed, antwhere it is used on the page.

This is not of itself good or bad, it is behaviour. Use it to desired effect.

As examples, I prefer to specify font size within elements (header, nav, aside, article, footer) in rem, font size of contained text (h1-h6, code, blockquote, pre, generally) in em, and width of text elements in em.

This allows for less CSS (most of my styles are a few dozen selectors, often less), as relative text doesn't require respecification, and content blocks are defined in terms of sensible, reader-focused, preferable widths, padding, and margins.

Much of that is personal preference: I design around article text, mostly, not wireframes or pixel-perfect layouts. The designs also tend to be robust.

Examples:

    html, body {font-size: medium; line-height: 1.4;}
    article { font-size: 1rem, width: 40em, padding: 2em 4em }
    aside, nav { font-size: 0.9rem;}
    header, footer {font-size: 0.8rem}
    h1, h2, h3, h4, h5, h6 {margin-top: 3em; margin-bottom: 1em; font-weight: bold;}
    h1 {font-size: 2em}
    h2 {font-size: 1.6em}
    h3 {font-size: 1.4em}
    h4 {font-size: 1.2em}
    h5, h6 {font-size: 1.1em}
    .callout {font-size: 2em; width: 50%; padding: 1em; margin: 1em: margin-left:0; float: left: clear both;}

Relative sizes of h1-h6 don't need to be respecified when used in header, footer, aside, nav, or .callout elements. And in callout, they're automatically scaled to 2x 1rem * factor -- cumulative application of em sizing.

With simple DOMs, this can be useful. Complex DOMs and stylesheets may benefit from direct specification via rem.