La migliore introduzione al BEM è di Harry Roberts:
BEM - che significa blocco, elemento, modificatore - è una metodologia di denominazione front-end ideata dai ragazzi di Yandex. È un modo intelligente di denominare le classi CSS per dare loro più trasparenza e significato ad altri sviluppatori. Sono molto più rigorosi e informativi, il che rende la convenzione di denominazione BEM ideale per i team di sviluppatori su progetti più grandi che potrebbero durare un po '.
A partire da Sass 3.3, possiamo scrivere cose come questa:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Finché le regole CSS sono brevi e il selettore di base è semplice, la leggibilità rimane accettabile. Ma quando le cose si fanno più complesse, questa sintassi rende difficile capire cosa sta succedendo. Per questo motivo, potremmo essere tentati di creare due mixin wrapper per la nostra sintassi 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; ) )Riscrivere il nostro esempio precedente con i nostri nuovissimi mixin:
.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` */ ) ) )Nota che le virgolette attorno alle stringhe sono opzionali, le aggiungiamo solo per una maggiore leggibilità.
Ora, se hai voglia elemente modifiersei troppo lungo per scrivere, puoi creare due alias più brevi in questo modo:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Utilizzo di alias:
.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` */ ) ) )