What is the correct way to use em in buttons?

Question

css

I always typed up components in px, but not long ago I read that you need to use relative values ​​as well. So, when changing the base size, the components (the same buttons) will change proportionally.
To work with the font I use rem, for indents, rounding, line spacing em. But after the translation, 1.03px is lost. I can't figure out exactly where.
Initial markup:

&--small {
        min-width: 140px;
        padding: 5px 12px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 22px;
}

After formatting:

&--small-rem {
        min-width: 10em;
        padding: 0.357em 0.857em;
        border-radius: 1.143em;
        font-size: 0.875rem;
        line-height: 1.571em;
}

All sources are here https://codepen.io/cronhor/pen/gyMJgv

Answer 1

Good evening!
As far as I understand how the browser works, there are no em, rem and other relative values ​​​​at the rendering level, the recalculation is in px, and therefore the remainder of the division after recalculation of em, rem, etc. sometimes it can be endless. Because of this, you have such jagged pixels popping up.
A more general point: what's the point of assigning font values ​​for an element to rem, and the rest of the values ​​in the same class to be in ems, and not in rem? The whole point of em is that such an element can be put into a small tag, for example, and all values ​​will be recalculated relative to this tag. REM was designed to avoid compounding the values ​​of nested ems, and you end up creating an element whose values ​​are bound to the local font, and the element's font is bound to the root font size, WHAAT?
It makes sense to do something like this:

.button {
  fz: 1em; // default
  p: 0.5em 0.75em;
  lh: 1.25;

  &--small {
    font-size: 0.75em;
  }
}

In this case, your button will match the font size of the parent element, and if you add the class to it .button--small, then 75% of the parent's font and all values ​​will be recalculated accordingly.
But I would not recommend doing this because of possible problems with nesting and em calculation. Buttons are usually rarely seen inline in design (in fact, that's the only reason to make them em), and they usually have strictly defined sizes, regardless of any other elements.
The only places where ems are good practice in my opinion are icons and some text utilities (like bootstrap's .small).

Answer 2

Try baseDir: './app'