10 фишек CSS

Упрощение селекторов

Селектор :is() позволяет сократить громоздкие цепочки:

:is(h1, h2, h3) {
  font-weight: bold;
}

Вместо написания отдельных правил, вы группируете нужные селекторы в один.

Адаптивные размеры без медиазапросов

clamp() позволяет задать минимальное, предпочтительное и максимальное значение:

font-size: clamp(1rem, 2vw, 2rem);

Теперь текст адаптируется к ширине экрана без @media.

Переменные CSS

Переменные упрощают повторное использование значений:

:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
}

Можно легко управлять цветами и отступами из одного места.

Flexbox — магия позиционирования

С помощью Flexbox можно центрировать элементы вертикально и горизонтально в пару строк:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Это заменяет сложные хаки с margin и position.

Grid Layout — мощная альтернатива Flexbox

Для сложной сетки макета лучше использовать Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Grid позволяет выстраивать колонки и строки с полной гибкостью.

aspect-ratio — контроль пропорций

Фиксируйте пропорции блоков без padding-хаков:

.image {
  aspect-ratio: 16 / 9;
}

Особенно удобно для превью, видео и карточек.

Псевдоэлементы

Добавляют контент до или после элемента без HTML:

button::before {
  content: "👉 ";
}

Тень без box-shadow

Создаёт тени у SVG и прозрачных объектов:

img {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

Альтернатива box-shadow с поддержкой прозрачности.

scroll-behavior smooth

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

html {
  scroll-behavior: smooth;
}

Работает сразу во всех современных браузерах.

supports — условные стили

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

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

Так можно писать прогрессивный CSS без полифилов.

Эти 10 фишек CSS — лишь верхушка айсберга. Зная их, вы уже сможете писать более чистый, гибкий и современный код. Используйте их для создания адаптивных интерфейсов, улучшения производительности и упрощения верстки.