Τι είναι η μεθοδολογία BEM;

BEM (Μπλοκ, Στοιχείο, Τροποποιητής) — μια μεθοδολογία ονοματοδοσίας κλάσεων στο CSS για τη δημιουργία κώδικα που είναι κλιμακούμενος και εύκολα συντηρήσιμος. Ο στόχος της είναι να κάνουν τα στοιχεία ανεξάρτητα, επαναχρησιμοποιήσιμα και εύκολα τροποποιήσιμα.

Βασικές αρχές:

Μπλοκ: Ανεξάρτητο συστατικό με μοναδικό όνομα. Μπορεί να περιέχει στοιχεία και άλλα μπλοκ.
```
<div class="card">...</div>
```
Στοιχείο: Μέρος του μπλοκ που δεν έχει αυτοτελή σημασία εκτός του πλαισίου του μπλοκ. Το όνομα του στοιχείου διαχωρίζεται από το όνομα του μπλοκ με δύο κάτω παύλες (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Τροποποιητής: Προσθέτει κατάσταση ή αλλάζει την εμφάνιση/συμπεριφορά του μπλοκ ή του στοιχείου. Το όνομα του τροποποιητή διαχωρίζεται από το όνομα του μπλοκ ή του στοιχείου με δύο παύλες (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Πλεονεκτήματα:

Αναγνωσιμότητα: Οι κλάσεις είναι εύκολες στην κατανόηση, φαίνεται η δομή του στοιχείου.
Επαναχρησιμοποίηση: Τα στοιχεία είναι ανεξάρτητα και μπορούν να χρησιμοποιηθούν σε διαφορετικά μέρη του έργου.
Συντηρησιμότητα: Οι αλλαγές σε ένα στοιχείο επηρεάζουν ελάχιστα τα άλλα.
Κλιμάκωση: Κατάλληλο για μεγάλες ομάδες και έργα.

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

.card {
  /* Στυλ του μπλοκ */
}

.card__title {
  /* Στυλ του στοιχείου */
}

.card__text {
  /* Στυλ του στοιχείου */
}

.card--featured {
  /* Στυλ του τροποποιητή του μπλοκ */
}

.button {
  /* Στυλ του μπλοκ */
}

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

.button--disabled {
  /* Στυλ του τροποποιητή του μπλοκ */
}