Η καλύτερη εισαγωγή στο BEM είναι από τον Harry Roberts:
Το BEM - που σημαίνει μπλοκ, στοιχείο, τροποποιητής - είναι μια μεθοδολογία ονομασίας front-end που έχουν σκεφτεί τα παιδιά στο Yandex. Είναι ένας έξυπνος τρόπος ονομασίας των κατηγοριών CSS για να τους δώσετε περισσότερη διαφάνεια και νόημα σε άλλους προγραμματιστές. Είναι πολύ πιο αυστηρές και ενημερωτικές, γεγονός που καθιστά τη σύμβαση ονομάτων BEM ιδανική για ομάδες προγραμματιστών σε μεγαλύτερα έργα που ενδέχεται να διαρκέσουν λίγο.
Από το Sass 3.3, μπορούμε να γράψουμε πράγματα όπως αυτό:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Όσο οι κανόνες CSS είναι σύντομοι και ο επιλογέας βάσης είναι απλός, η αναγνωσιμότητα παραμένει εντάξει. Αλλά όταν τα πράγματα γίνονται πιο περίπλοκα, αυτή η σύνταξη δυσκολεύει να καταλάβει τι συμβαίνει. Εξαιτίας αυτού, ενδέχεται να μπουν στον πειρασμό να δημιουργήσουμε δύο αναμίξεις περιτυλίγματος για τη σύνταξή μας BEM:
/// Block Element /// @access public /// @param (String) $element - Element's name @mixin element($element) ( &__#($element) ( @content; ) ) /// Block Modifier /// @access public /// @param (String) $modifier - Modifier's name @mixin modifier($modifier) ( &--#($modifier) ( @content; ) )Ξαναγράφοντας το προηγούμενο παράδειγμά μας με τα ολοκαίνουργια mixins μας:
.block ( /* CSS declarations for `.block` */ @include element('element') ( /* CSS declarations for `.block__element` */ ) @include modifier('modifier') ( /* CSS declarations for `.block--modifier` */ @include element('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )Λάβετε υπόψη ότι τα εισαγωγικά γύρω από χορδές είναι προαιρετικά, τα προσθέτουμε μόνο για επιπλέον αναγνωσιμότητα.
Τώρα, αν θέλετε elementκαι modifierθέλετε να πληκτρολογήσετε πολύ, μπορείτε να δημιουργήσετε δύο μικρότερα ψευδώνυμα όπως:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Χρήση ψευδωνύμων:
.block ( /* CSS declarations for `.block` */ @include e('element') ( /* CSS declarations for `.block__element` */ ) @include m('modifier') ( /* CSS declarations for `.block--modifier` */ @include e('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )