Какие плюсы и минусы em?

Какие плюсы и минусы em?

em - это относительная единица измерения в CSS, которая зависит от размера шрифта элемента. 1em = размер шрифта текущего элемента.

Плюсы em

1. Масштабируемость - padding, margin и другие значения масштабируются вместе со шрифтом

.button {
  font-size: 14px;
  padding: 0.5em 1em;  /* масштабируется с font-size */
}

.button.large {
  font-size: 20px;  /* padding автоматически увеличится */
}

1. Адаптивность - компоненты автоматически подстраиваются под разные контексты

2. Удобство поддержки - изменение размера шрифта меняет все зависимые значения

3. Относительные размеры - отступы пропорциональны тексту

Минусы em

1. Множественное наследование (em hell)

em вычисляется относительно родителя, что создаёт каскадный эффект:

.container { font-size: 1.5em; }    /* 24px */
.nested { font-size: 1.5em; }       /* 36px (1.5 * 24) */
.deep-nested { font-size: 1.5em; }  /* 54px (1.5 * 36) */

1. Сложные расчёты - нужно считать цепочку родителей для получения реального размера

2. Неясность - трудно понять, какой будет реальный размер без калькулятора

3. Сложность рефакторинга - изменение структуры HTML может сломать стили

4. Непредсказуемость - вложенные элементы дают неожиданные размеры

Альтернатива: rem

rem (root em) вычисляется относительно корневого элемента html:

html { font-size: 16px; }
.container { font-size: 1.5rem; }  /* всегда 24px */
.nested { font-size: 1.5rem; }     /* всегда 24px */

rem решает проблему множественного наследования.

Когда использовать em?

Используй em для внутренних отступов компонента, которые должны масштабироваться со шрифтом. Для глобальных размеров и размеров шрифта используй rem.