1
HTML/CSSIntermediate#css#variables
HTML/CSSIntermediate#css#units
What is the difference between em and rem when nesting components?
em compounds with each nested level since it's relative to the immediate parent's font-size, which can cause unpredictable scaling in deeply nested components. rem always refers back to the root html font-size, staying predictable regardless of nesting depth.
Example
html { font-size: 16px; }
.parent { font-size: 1.5em; } /* 24px */
.child { font-size: 1.5em; } /* 36px, compounds! */
.child-rem { font-size: 1.5rem; } /* always 24px, no compounding */