foundation

Logical properties

Используйте block и inline properties, чтобы отступы, границы и позиционирование следовали writing mode и направлению текста.

Logical properties описывают грани относительно writing mode: block (поток абзаца) и inline (направление текста) вместо physical top, right, bottom, left.

					.card {
  margin-block: 1rem;
  margin-inline: auto;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent);
  inset-inline-end: 0;
}

`margin-inline`, `padding-block`, `inset`, `border-inline` и logical sizing (`inline-size`, `block-size`) адаптируются при `direction: rtl` или вертикальных writing modes — без дублирования правил.

На интервью: интернационализация, RTL и почему margin-inline лучше margin-left для переиспользуемых компонентов.

Компромисс: усилия миграции на logical properties против дублирования physical правил для каждого writing mode.

Типовые ошибки: смешение physical и logical в одном компоненте; частичная миграция без visual regression.

Чеклист:

Spacing и position по intent потока.
Тест RTL и вертикального письма.
Мигрируйте utilities последовательно.
Осознанно мапьте legacy physical классы.