Что такое вложенность в Sass/SCSS и почему она повышает specificity?

Question

Accepted Answer

## Как компилируется

SCSS-вложенность разворачивается в длинные селекторы-потомки. Каждый уровень добавляет сущности в специфичность.

```scss
.nav {
  .list {
    li {
      a { color: blue; } // → .nav .list li a  (0,1,3)
    }
  }
}
```

Кажется удобно, на выходе — хрупкий каскад: чтобы переопределить ссылку, нужен ещё более длинный селектор или `!important`.

## Практика

Лимит вложенности 2–3, BEM-классы без цепочек тегов, `&` только для hover/modifiers. Stylelint `max-nesting-depth` спасает команды.

## Итог

Nesting — сахар; глубокий nesting = раздутая specificity. Плоские классы масштабируются лучше.