Вложенность CSS

В 2023 году в CSS стало возможным использовать вложенность, как на примере ниже:

.product a { }
.product strong { }

/*сокращённый вариант кода выше*/
.product {
  a {}
  strong {}
}

Также можно сокращать стили элемента, например, при наведении или нажатии.

.product a { color: green }
.product a:hover { color: lightgreen }
.product a:active { color: blue }

/* сокращённый код ниже */
.product a {
  color: green;

  &:hover { color: lightgreen }
  &:active { color: blue }
}

Также можно задавать стили, в зависимости от размера экрана браузера:

.product {
  font-size: 14px;

  @media (width > 992px) {
    font-size: 16px;
  }
}

Данная технология называется CSS Nesting. На 2025 год она находится в стадии «черновик», но поддерживается уже всеми современными браузерами.