Подборка советов и лайфхаков в CSS #1

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

1. Отступы между элементами

Устаревший способ

.container > * {
  margin-left: 1rem;
}
.container >*:last-child {
  margin-right: 1rem;
}

Новый, стильный, молодежный способ:

.container {
  display:flex;
  padding:1rem;
  gap: 1rem;
}

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

Вместо устаревшего способа

H1.bold, H2.bold, H3.bold {
...
}

Можно сделать упрощенную запись?

:is(H1, H2, H3) .bold {
...
}

3. Центрирование элемента

Вместо способа центрирования через Flexbox

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

Можно использовать более ёмкую запись через Grid

.container {
  display: grid;
  place-items: center;
}