10 полезных CSS-трюков, которые сэкономят вам время

В современном CSS появилось множество функций, которые могут значительно упростить вашу работу. Вот подборка неочевидных приёмов, которые помогут писать меньше кода и получать больше результата.

1. Свойство aspect-ratio для пропорций

Больше не нужно вычислять padding-top для сохранения пропорций!

.video-container {
  aspect-ratio: 16 / 9;
  background: #000;
}

"Это свойство избавило меня от сотни строк кода с padding-hack" — опытный фронтенд-разработчик

2. Gap для Flexbox

Теперь можно легко добавлять отступы между flex-элементами без margin:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

3. Функция clamp() для адаптивных размеров

Одной строкой заменяем медиазапросы для текста:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Где: минимальный размер 1.5rem, идеальный 5vw, максимальный 3rem.

4. :where() для упрощения селекторов

Уменьшаем специфичность и делаем код чище:

/* Вместо */
article h2, 
section h2, 
aside h2 {
  color: #2d3748;
}
/* Пишем */
:where(article, section, aside) h2 {
  color: #2d3748;
}

5. object-fit для изображений

Контролируем как изображения заполняют контейнер:

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Доступные значения: fill, contain, cover, none, scale-down.

6. CSS-переменные с fallback

Плавная деградация для старых браузеров:

.element {
  color: var(--primary-color, #4299e1);
  padding: var(--spacing, 16px);
}

7. :empty для скрытия пустых элементов

Автоматически скрываем элементы без контента:

.alert:empty {
  display: none;
}

8. scroll-behavior для плавного скролла

Плавная прокрутка к якорям без JavaScript:

html {
  scroll-behavior: smooth;
}

9. :is() для группировки селекторов

Сокращаем повторяющиеся селекторы:

/* Вместо */
  .header h1,
  .main h1,
  .footer h1 {
  margin-bottom: 1rem;
}
/* Пишем */
:is(.header, .main, .footer) h1 {
margin-bottom: 1rem;
}

10. accent-color для стилизации элементов форм

Легко меняем цвет чекбоксов и радиокнопок:

input[type="checkbox"] {
  accent-color: #4299e1;
  width: 20px;
  height: 20px;
}

Заключение

Эти современные CSS-приёмы помогут вам:

• Сократить количество кода
• Улучшить производительность
• Сделать вёрстку более гибкой
• Сэкономить время на разработку

Большинство этих свойств поддерживаются во всех современных браузерах, но всегда проверяйте на Can I use перед применением в production.