Den beste introduksjonen til BEM er fra Harry Roberts:
BEM - som betyr blokk, element, modifikator - er en frontend-navngivningsmetodikk tenkt ut av gutta på Yandex. Det er en smart måte å navngi CSS-klassene dine for å gi dem mer åpenhet og mening for andre utviklere. De er langt mer strenge og informative, noe som gjør BEM-navnekonvensjonen ideell for team av utviklere på større prosjekter som kan vare en stund.
Siden Sass 3.3 kan vi skrive ting som dette:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Så lenge CSS-reglene er korte og grunnvelgeren er enkel, er lesbarheten greit. Men når ting blir mer komplekse, gjør denne syntaksen det vanskelig å finne ut hva som skjer. På grunn av dette kan vi bli fristet til å bygge to wrapper mixins for BEM-syntaksen:
/// 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; ) )Omskriver vårt forrige eksempel med våre splitter nye 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` */ ) ) )Merk at anførselstegn rundt strenger er valgfrie, vi legger dem bare til for ekstra lesbarhet.
Nå, hvis du har lyst elementog modifierer for lang til å skrive, kan du opprette to kortere aliaser slik:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Bruke aliaser:
.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` */ ) ) )