Πώς επιτυγχάνεται η απομόνωση κατά τη χρήση της μεθοδολογίας BEM;

Η απομόνωση επιτυγχάνεται μέσω μοναδικών κλάσεων για μπλοκ, στοιχεία και τους τροποποιητές τους.

• Μπλοκ: Έχει ένα μοναδικό όνομα κλάσης, π.χ., button. Τα στυλ που εφαρμόζονται στην κλάση του μπλοκ ισχύουν μόνο για τα στοιχεία μέσα σε αυτό το μπλοκ.
• Στοιχείο: Έχει ένα όνομα κλάσης που αποτελείται από το όνομα του μπλοκ, δύο κάτω παύλες και το όνομα του στοιχείου, π.χ., button__text. Τα στυλ του στοιχείου σχετίζονται με ένα συγκεκριμένο μπλοκ και δεν επηρεάζουν στοιχεία με το ίδιο όνομα σε άλλο μπλοκ.
• Τροποποιητής: Έχει ένα όνομα κλάσης που αποτελείται από το όνομα του μπλοκ ή του στοιχείου, δύο παύλες (ή μια κάτω παύλα, ανάλογα με τη συμφωνία) και το όνομα του τροποποιητή, π.χ., button--disabled ή button__text_bold. Ο τροποποιητής προσθέτει ή αλλάζει τις ιδιότητες ενός υπάρχοντος μπλοκ ή στοιχείου, χωρίς να επηρεάζει άλλα.

Παράδειγμα δομής HTML:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Πατήστε</span>
</button>

<div class="card">
  <h2 class="card__title">Τίτλος</h2>
  <p class="card__text">Κείμενο κάρτας</p>
</div>

Παράδειγμα CSS:

.button {
  /* Στυλ μόνο για το κουμπί */
}

.button--primary {
  /* Στυλ του τροποποιητή μόνο για αυτό το κουμπί */
}

.button__icon {
  /* Στυλ εικονιδίου μόνο μέσα στο .button */
}

.button__text {
  /* Στυλ κειμένου μόνο μέσα στο .button */
}

.card {
  /* Στυλ μόνο για την κάρτα */
}

.card__title {
  /* Στυλ τίτλου μόνο μέσα στην .card */
}

.card__text {
  /* Στυλ κειμένου μόνο μέσα στην .card */
}

Χάρη σε αυτήν την ονοματολογία και δομή των στυλ, οι κανόνες CSS για ένα μπλοκ δεν συγκρούονται με αυτούς για άλλο, ακόμη και αν περιέχουν στοιχεία με παρόμοια ονόματα. Αυτό διευκολύνει την ανάπτυξη, τη συντήρηση και την επαναχρησιμοποίηση των στοιχείων.