Den bedste introduktion til BEM er fra Harry Roberts:
BEM - hvilket betyder blok, element, modifikator - er en front-end navngivningsmetode, der er tænkt op af fyrene på Yandex. Det er en smart måde at navngive dine CSS-klasser for at give dem mere gennemsigtighed og mening for andre udviklere. De er langt mere strenge og informative, hvilket gør BEM-navngivningskonventionen ideel til teams af udviklere på større projekter, der kan vare et stykke tid.
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å længe CSS-regler er korte, og basisvælgeren er enkel, forbliver læsbarheden okay. Men når tingene bliver mere komplekse, gør denne syntaks det svært at finde ud af, hvad der foregår. På grund af dette kan vi blive fristet til at bygge to wrapper mixins til vores BEM-syntaks:
/// 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; ) )Omskrivning af vores tidligere eksempel med vores helt 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` */ ) ) )Bemærk, at citater omkring strenge er valgfri, vi tilføjer dem kun for ekstra læsbarhed.
Nu, hvis du har lyst til elementog modifierer for lang til at skrive, kan du oprette to kortere alias som sådan:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Brug af aliasser:
.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` */ ) ) )