В веб-разработке мы привыкли спорить: «Что лучше — px или rem?», «Использовать ли em или проценты?» В итоге каждая школа фронтенда вырабатывала свои догмы, а начинающий разработчик оказывался в ловушке правил. Но современный CSS показывает: не обязательно выбирать одну «правильную» единицу — их можно комбинировать.
🧩 Зачем комбинировать единицы
Браузеры давно умеют не только вычислять значения, но и сравнивать их:
- calc() — арифметика с любыми единицами;
- min() / max() — выбор меньшего или большего значения;
- clamp() — ограничение диапазона.
Это значит, что теперь разработчик может описывать намерение, а не подгонять дизайн под жёсткие правила.
Пример:
html {
font-size: max(1em, 20px);
font-size: clamp(1em, 20px, 1.25em);
}
Здесь мы учитываем и пользовательский выбор (em), и нашу дизайнерскую цель (px). Раньше пришлось бы жертвовать одним ради другого.
📐 Когда какая единица уместна
- ✍️ lh / rlh — идеально для вертикальных интервалов в тексте, чтобы сохранять ритм строк.
- 🖼 vi / vb — адаптируются к вьюпорту, полезны для адаптивной типографики.
- 🌐 em / rem — учитывают каскад шрифтов и предпочтения пользователя.
- 📦 px — прямое управление в случаях, где нужно чётко фиксированное значение.
Но самое интересное начинается, когда мы их комбинируем:
.card {
padding: clamp(12px, 2vi, 2lh);
}
Здесь паддинг одновременно зависит от фиксированного минимума, ширины контейнера и типографического ритма.
⚡ Технические детали реализации
Современные браузеры умеют обрабатывать такие выражения напрямую, без «препроцессорных хаков». Это значит:
- нет потери производительности на рендере;
- значения пересчитываются динамически при изменении вьюпорта или zoom;
- код становится более декларативным, ближе к тому, как мы мысленно описываем дизайн.
💡 Моё мнение
Я вижу в этом подходе не только техническое удобство, но и философский сдвиг. Веб-дизайн всегда был компромиссом между жёстким контролем и гибкостью. Раньше мы «подстраивали» дизайн под ограничение конкретных единиц, теперь же можем описывать намерения напрямую: «Размер текста должен учитывать и базовую сетку, и предпочтения пользователя, и ширину экрана».
Это напоминает «поэтический CSS», о котором говорит автор статьи: писать не просто код, а выражать смысловые связи между элементами интерфейса.
🚀 Куда дальше
В ближайшие годы нас ждёт:
- 💻 широкое применение clamp() и min()/max() в дизайн-системах — уже не как «фишка», а как стандарт;
- 📱 адаптивная типографика без медиазапросов — за счёт комбинации rem + vi;
- 🔮 смешение с кастомными свойствами (CSS variables), где сами единицы становятся «функциями намерения».
И, возможно, через несколько лет вопрос «px или rem?» станет таким же архаичным, как спор о том, использовать ли <table> для верстки.
🔗 Источник: CSS Unit Might Be a Combination — OddBird