Ποια είναι τα μειονεκτήματα της χρήσης του & στους προεπεξεργαστές;

• Η επιδείνωση της αναγνωσιμότητας σε βαθιές εσοχές.
• Η πολυπλοκότητα στην κατανόηση και αποσφαλμάτωση του κώδικα με πολλαπλά συμφραζόμενα μέσα στους επιλεκτές.
• Πιθανές συγκρούσεις κατά το refactoring αν δεν είναι σαφές σε ποιον γονικό επιλεκτή ανήκει το σύμβολο ampersand.
• Το & μπορεί να οδηγήσει σε υπερβολικό αριθμό στυλ για ένα στοιχείο, καθιστώντας το CSS λιγότερο αποδοτικό.

Παράδειγμα:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Συμφραζόμενο .parent .child--modifier
      // ...
      &-nested { // Συμφραζόμενο .parent .child--modifier-nested - γίνεται λιγότερο σαφές
        color: red;
      }
    }
  }
}

Σε ένα άλλο παράδειγμα, μπορείτε να δείτε πώς το & μπορεί να κρύψει τον πραγματικό επιλεκτή:

.btn {
  // ...
  &-primary { // Αντιστοιχεί στο .btn-primary
    background-color: blue;
  }
}

Κατά το refactoring, αν μετονομάσετε το .btn, πρέπει να θυμάστε να αλλάξετε και το -primary. Η χρήση μιας ξεχωριστής κλάσης .btn-primary μπορεί να είναι πιο σαφής και ανθεκτική στις αλλαγές.