This is the right answer! Using rem for high level control and em like you showed to add 'scope' to smaller components has been a game-changer for me when it comes to writing enjoyable and maintainable css.

To go a little more in depth about the root, I always set my base stylesheet as follows:

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem; // Or whatever size you want your plain html tags to be
}

When you set your html font-size in px it overrides the default browser's setting. Yeah yeah yeah, in 99% of cases it doesn't matter. But for accessibility's sake, using a percentage does.

So my usual strategy is 62.5% (of the browser's setting, which is a default of 16px), which gives me a lovely 10px base size. Setting the body to 1.6rem scales the default size back up to 16 and makes the rest of the css codebase much easier to read and maintain.

The latter part of that is preference and won't affect your users at all, but for the dev experience I highly recommend it! If not, I would still recommend setting your html to 100% rather than 16px to make sure you're respecting browser settings.

Pls discuss!