Μια γρήγορη εισαγωγή στους τροποποιητές στοιχειωδών στοιχείων (BEM)

Τροποποιητής στοιχείου μπλοκαρίσματος

Γεια σου! Έτσι θέλετε να έχετε καλύτερη κατανόηση της BEM; Υποθέτω ότι αν διαβάζετε αυτό, ίσως να μην ξέρετε τι σημαίνει BEM. Σε περίπτωση που δεν το κάνετε, είναι συντομογραφία για το στοιχείο μπλοκ και τροποποιητή.

Τι είναι το BEM;

Το BEM είναι μια μεθοδολογία σχεδίασης που σας βοηθά να δημιουργείτε επαναχρησιμοποιήσιμα εξαρτήματα και να μοιράζεστε κώδικα στην ανάπτυξη του front-end. - getbem.com

Αυτό σημαίνει ότι το BEM είναι ένα σύστημα μεθόδων που σας βοηθά να γράψετε τον κώδικα HTML και CSS έτσι ώστε να είναι απλό να επαναχρησιμοποιηθεί και να μοιραστεί με άλλα μέρη του κώδικα σας.

BEM σε δράση.

Έτσι τώρα γνωρίζετε τον ορισμό της BEM, αλλά ίσως να μην ξέρετε πώς φαίνεται ή πώς λειτουργεί. Όπως είπα προηγουμένως, το BEM είναι μια σύντμηση, οπότε ας ρίξουμε μια ματιά σε κάθε μία από αυτές τις λέξεις και τι σημαίνουν.

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ

Ένα "μπλοκ" αναφέρεται σε κάθε οντότητα που μπορεί να παραμείνει μόνη της και εξακολουθεί να έχει νόημα. Παραδείγματα μπλοκ είναι η κεφαλίδα, η είσοδος και το πλαίσιο ελέγχου. Παραδείγματα πράξεων που δεν είναι μπλοκ είναι οι τίτλοι κεφαλίδων, ένα στοιχείο σε μια λίστα ή μια ετικέτα για ένα πλαίσιο ελέγχου.

Αν πρέπει να αφαιρέσουμε το κείμενο που επισημαίνει μια είσοδο ραδιοφώνου και να το βάλουμε μόνο του, δεν θα έχει πλέον νόημα.

Κοίτα αυτό:

Αν το τμήμα που περιγράφεται διαχωρίζεται σε μεμονωμένα μπλοκ, δεν θα έχουν πλέον νόημα στο χρήστη.

Αυτός είναι ένας πραγματικός διαχωρισμός σε μπλοκ:

Εάν αφαιρέσω κάποιο από αυτά τα μπλοκ και το έριξα μακριά, το άλλο μπλοκ θα έχει ακόμα κάποια σημασία για τον χρήστη. Παρόλα αυτά, σε αυτή την περίπτωση, δεν θα είναι χρήσιμο για τον χρήστη, επειδή είναι ένα κουμπί επιλογής αντί για ένα πλαίσιο ελέγχου.

Είναι σημαντικό να εξετάσουμε ένα μπλοκ ως οποιοσδήποτε συνδυασμός (ή μια ενιαία ετικέτα HTML) πολλών στοιχείων (ή άλλων μπλοκ) κατά τρόπο που έχει νόημα για τον χρήστη όταν τοποθετείται μόνος του.

Στοιχεία

Ένα στοιχείο θα πρέπει να είναι λίγο πιο κατανοητό από τώρα που το εξήγησα όταν μίλησα για Blocks. Τα τμήματα ενός μπλοκ που δεν έχουν σημασιολογική σημασία εκτός του μπλοκ είναι στοιχεία.

Ας δούμε αυτό ξανά:

Τα επισημασμένα μέρη είναι στοιχεία επειδή βοηθούν να ορίσετε τι είναι το μπλοκ.

Ο κώδικας για την παραπάνω οθόνη θα έμοιαζε κάπως έτσι:

Έχουμε τρία στοιχεία που αποτελούν το μπλοκ επιλογών: option__text, option__radio-button, option__note. Ωστόσο, θα μπορούσαμε να αλλάξουμε ένα από αυτά τα στοιχεία σε ένα δικό του μπλοκ:

Το στοιχείο option__note είναι τώρα ένα σημείωμα block. Αυτό σημαίνει ότι θα μπορούσαμε να βρούμε σημειώσεις εκτός του μπλοκ επιλογών κατά τρόπο που να είναι χρήσιμος για τον χρήστη.

Τροποποιητής

Ένας τροποποιητής είναι μια σημαία που αλλάζει τον τρόπο εμφάνισης ή συμπεριφοράς ενός μπλοκ ή ενός στοιχείου. Για παράδειγμα:

Τα δύο κουμπιά είναι το ίδιο μπλοκ, αλλά φαίνονται διαφορετικά. Η ισχύς που μας δίνει η BEM, μας επιτρέπει να χρησιμοποιήσουμε το ίδιο μπλοκ δύο φορές και να τις δούμε πολύ διαφορετικές.

Ας δούμε πώς φαίνεται ο κώδικας για αυτό:

Από προεπιλογή, το κουμπί είναι λευκό με μπλε κείμενο. Για να πάρετε μια παραλλαγή, προσθέτουμε ένα κουμπί - πράσινη σημαία, η οποία στη συνέχεια κάνει το κουμπί πράσινο με ένα λευκό κείμενο.

Σύμφωνα με τους κανόνες του BEM, το κουμπί μας σημαίας - πράσινο έχει ένα "παρενέργεια" που μπορεί να οδηγήσει σε σύγχυση που είναι η ιδιότητα σκιά κουτιού. Η σημαία μας κάνει κάτι που το όνομά του δεν μας λέει. Αλλά αυτό είναι εντάξει, γιατί, στο μικρό μας έργο, δεν θα έχουμε ποτέ ένα πράσινο κουμπί με μια σκιά κουτιού. Αν κάνουμε ποτέ, μπορούμε να σπάσουμε τη σημαία:

Τώρα, όταν χρειαζόμαστε ένα πράσινο κουμπί με σκιά κουτιού, θα προσθέσουμε μόνο το κουμπί - πράσινη σημαία. Το ίδιο ισχύει και για την ιδιότητα χρώματος.

συμπέρασμα

Το BEM είναι ένας πολύ καλός τρόπος για να γράψετε και να διαρθρώσετε τον κώδικα HTML και CSS. Αυτός ο οδηγός δεν καλύπτει το 100% του συνόλου του BEM, αλλά θα πρέπει να είναι αρκετό για να σας δώσει μια σωστή κατανόηση της μεθοδολογίας. Μπορείτε να διαβάσετε περισσότερα για το BEM εδώ.

Ελπίζω να μάθατε κάτι από αυτό και ότι έχετε καλύτερη κατανόηση της BEM και πώς φαίνεται στον πραγματικό κόσμο. Εάν το κάνετε, μην διστάσετε να αφήσετε ένα σχόλιο και μερικά χτυπήματα.

Έχετε κάποιες ερωτήσεις; Μπορείτε να μου στείλετε ένα DM στο twitter @ THEozmic.