Заметки разработчика: “CSS функции `min()` и `max()` По моему опыту, CSS функцию clamp() любя…”

CSS функции `min()` и `max()`

По моему опыту, CSS функцию clamp() любят больше, чем min() и max().

Конечно, она часто оказывается самой удобной, но и min(), и max() также могут принести огромную пользу.

В отличие от clamp(), требующей трех значений, функции min() и max() принимают столько значений, сколько необходимо.

Например, можно сделать что-то вроде этого:

.element {
  inline-size: min(100%, 960px, 60ch);
}

Я начал использовать min() во многих местах, где раньше использовал свойства max-, например, max-inline-size.

Один из распространенных примеров — классы .container/.wrapper:

.wrapper {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

В данном случае я выбираю меньшее значение между 100% - 32px и 960px.

Недостатком этих свойств часто является то, что их сложно быстро прочитать, но если в CSS возникает проблема с читаемостью, несколько CSS переменных всегда упростят жизнь.

.wrapper {
  --max-width: 960px;
  --padding: 16px;
  
  width: min(
           100% - var(--padding) * 2,
           var(--max-width)
         );
}

Может показаться, что это требует больше усилий, но я предпочитаю использовать переменные CSS для таких вещей, поскольку при необходимости они легко изменяются.

📱 @dev_notes_ru

#Frontend #CSS