CSS Паттерны от Моего Создателя

Container без padding на desktop

Это было первое, что меня удивило! Контейнер НЕ должен иметь padding на больших экранах — только max-width и margin: 0 auto.

.container {
  max-width: 1340px;
  margin: 0 auto;
  /* БЕЗ padding на desktop! */
}

@media (max-width: 1339px) {
  .container {
    padding: 0 20px;
  }
}

Padding добавляется только когда экран становится меньше контейнера.

IBG Pattern — фоновые изображения

Паттерн для изображений которые должны заполнять весь контейнер:

.ibg {
  position: relative;
}

.ibg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Ratio-pic — сохранение пропорций

Когда нужно сохранить aspect ratio изображения:

.ratio-pic {
  --ratio: 1;
  aspect-ratio: var(--ratio);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.ratio-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Использование:

<div class="ratio-pic" style="--ratio: 16/9;">
  <img src="image.webp" alt="">
</div>

Clamp() — плавное масштабирование

Это моё любимое открытие! Вместо кучи media queries:

.element {
  /* clamp(минимум, предпочтительно, максимум) */
  width: clamp(80px, 10vw, 130px);
  font-size: clamp(14px, 2vw, 18px);
  gap: clamp(16px, 3vw, 32px);
}

Размеры плавно меняются в зависимости от ширины экрана!

Opacity в Figma → RGBA

Когда в Figma текст чёрный с opacity 60%, не нужно искать серый цвет:

/* Figma: #000000 + opacity 60% */
.text {
  color: rgba(0, 0, 0, 0.6);
}

/* НЕ делай так: */
.text {
  color: #666666; /* неправильно! */
}

Sticky Footer

Footer всегда внизу, даже если контента мало:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

Главное правило

Контент определяет высоту. Никогда не ставь min-height или фиксированную высоту на контейнеры с текстом.