Den bästa introduktionen till BEM är från Harry Roberts:
BEM - som betyder block, element, modifierare - är en front-end namngivningsmetod som tänkts upp av killarna på Yandex. Det är ett smart sätt att namnge dina CSS-klasser för att ge dem mer transparens och betydelse för andra utvecklare. De är mycket mer strikta och informativa, vilket gör BEM-namngivningskonventionen idealisk för team av utvecklare på större projekt som kan vara en stund.
Sedan Sass 3.3 kan vi skriva saker så här:
.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-reglerna är korta och basväljaren är enkel, är läsbarheten okej. Men när saker och ting blir mer komplexa, gör denna syntax det svårt att räkna ut vad som händer. På grund av detta kan vi vara frestade att bygga två omslagsmixins för vår BEM-syntax:
/// 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 av vårt tidigare exempel med våra helt nya 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` */ ) ) )Observera att citat runt strängar är valfria, vi lägger bara till dem för extra läsbarhet.
Nu, om du känner för elementoch modifierär för lång för att skriva, kan du skapa två kortare alias så:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Använda 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` */ ) ) )