Jaké jsou nevýhody používání ampersandu (&) v preprocesorech?

• Zhoršení čitelnosti při hluboké vnořenosti.
• Složitost porozumění a ladění kódu s více kontexty uvnitř selektorů.
• Potenciální konflikty při refaktoringu, pokud není jasné, ke kterému rodičovskému selektoru patří ampersand.
• & může vést k nadměrnému množství stylů pro prvek, což činí CSS méně efektivním.

Příklad:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Kontext .parent .child--modifier
      // ...
      &-nested { // Kontext .parent .child--modifier-nested - stává se méně přehledným
        color: red;
      }
    }
  }
}

V jiném příkladu lze vidět, jak & může skrýt skutečný selektor:

.btn {
  // ...
  &-primary { // Odpovídá .btn-primary
    background-color: blue;
  }
}

Při refaktoringu, pokud přejmenujete .btn, je třeba pamatovat na změnu -primary. Použití samostatné třídy .btn-primary může být jasnější a odolnější vůči změnám.