Mik a hátrányai az & használatának a preprocesszorokban?

• Az olvashatóság romlása mély beágyazás esetén.
• A kód megértésének és hibakeresésének bonyolultsága több kontextus esetén a szelektorokon belül.
• Potenciális konfliktusok refaktorálás során, ha nem világos, hogy az ampersand melyik szülő szelektorhoz tartozik.
• Az & túlzott stílusokat eredményezhet az elem számára, ami kevésbé hatékony CSS-t eredményez.

Példa:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Kontextus .parent .child--modifier
      // ...
      &-nested { // Kontextus .parent .child--modifier-nested - kevésbé áttekinthető
        color: red;
      }
    }
  }
}

Egy másik példában látható, hogyan rejtheti el az & a valódi szelektort:

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

Refaktoráláskor, ha átnevezi a .btn-t, emlékezzen arra, hogy módosítania kell a -primary-t is. Egy külön .btn-primary osztály használata világosabb és változásokkal szemben ellenállóbb lehet.