Aké sú nevýhody používania ampersandu (&) v preprocessorech?

• Zhoršenie čitateľnosti pri hlbokej vnorenej štruktúre.
• Zložitosť pri pochopení a ladení kódu s viacerými kontextami vo vnútri selektorov.
• Potenciálne konflikty pri refaktoringu, ak nie je jasné, ku ktorému rodičovskému selektoru patrí ampersand.
• & môže viesť k nadmernému množstvu štýlov pre prvok, čím je CSS menej efektívne.

Príklad:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Kontext .parent .child--modifier
      // ...
      &-nested { // Kontext .parent .child--modifier-nested - stáva sa menej prehľadným
        color: red;
      }
    }
  }
}

V inom príklade je vidieť, ako & môže skryť skutočný selektor:

.btn {
  // ...
  &-primary { // Zodpovedá .btn-primary
    background-color: blue;
  }
}

Pri refaktoringu, ak premenujete .btn, musíte si zapamätať zmeniť aj -primary. Použitie samostatnej triedy .btn-primary môže byť jasnejšie a odolnejšie voči zmenám.