Как работает вложенность (nesting) в нативном CSS?

Question

Accepted Answer

## Что появилось

Браузеры поддерживают CSS Nesting: правила внутри правил, как в Sass, но с оговорками синтаксиса.

```css
.card {
  padding: 1rem;

& .title { font-weight: 600; }

&:hover { border-color: var(--accent); }

@media (min-width: 768px) {
    padding: 1.5rem;
  }
}
```

`&` явно обозначает родителя. Без `&` перед идентификатором вложенность может быть невалидной (зависит от формы селектора) — привыкайте писать `&`.

## Риски

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

## Итог

Нативный nesting удобен рядом с компонентом; держите глубину небольшой и не забывайте `&`.