Quali sono gli svantaggi dell'uso dell'ampersand (&) nei preprocessori?

• Peggioramento della leggibilità in profondità di annidamento.
• Complessità nella comprensione e nel debug del codice con molteplici contesti all'interno dei selettori.
• Potenziali conflitti durante il refactoring se non è chiaro a quale selettore genitore appartiene l'ampersand.
• & può portare a un numero eccessivo di stili per un elemento, rendendo il CSS meno efficiente.

Esempio:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Contesto .parent .child--modifier
      // ...
      &-nested { // Contesto .parent .child--modifier-nested - diventa meno chiaro
        color: red;
      }
    }
  }
}

In un altro esempio, si può vedere come & può nascondere il selettore reale:

.btn {
  // ...
  &-primary { // Corrisponde a .btn-primary
    background-color: blue;
  }
}

Durante il refactoring, se si rinomina .btn, bisogna ricordarsi di cambiare anche -primary. L'uso di una classe separata .btn-primary può essere più chiaro e resistente alle modifiche.