. Можно ли писать стили с вложенными селекторами?

Вложенные селекторы — это способ записывать CSS-правила так, чтобы дочерние селекторы находились внутри родительского блока. Это делает код более читаемым и логически связанным, особенно когда стилизуется компонент с несколькими состояниями и элементами.

Как это работает

В классическом CSS вложенность не поддерживалась, поэтому разработчики использовали препроцессоры: Sass/SCSS, Less, Stylus. Они компилируют вложенный синтаксис в плоский CSS. С 2023 года нативная вложенность поддерживается в современных браузерах через спецификацию CSS Nesting.

/* SCSS */
.card {
  padding: 16px;
  border: 1px solid #ccc;

  .title {
    font-size: 20px;
  }

  &:hover {
    border-color: #000;
  }
}

/* Нативный CSS Nesting */
.card {
  padding: 16px;
  & .title { font-size: 20px; }
  &:hover { border-color: #000; }
}

Где применяется

• Компонентный подход: один блок стилей на компонент (React, Vue, Angular).
• Методология BEM: вложенность помогает группировать блок, элементы и модификаторы.
• Темы и состояния: удобно описывать :hover, :focus, .is-active внутри родителя.

Подводные камни

1. Слишком глубокая вложенность повышает специфичность и усложняет переопределение стилей.
2. В нативном CSS вложенный селектор без & трактуется как descendant, что иногда даёт неожиданный результат.
3. Препроцессоры требуют сборки, тогда как нативный CSS работает без инструментов.

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