A melhor introdução ao BEM é de Harry Roberts:
BEM - que significa bloco, elemento, modificador - é uma metodologia de nomenclatura de front-end pensada pelo pessoal da Yandex. É uma maneira inteligente de nomear suas classes CSS para dar-lhes mais transparência e significado para outros desenvolvedores. Eles são muito mais restritos e informativos, o que torna a convenção de nomenclatura BEM ideal para equipes de desenvolvedores em projetos maiores que podem durar um certo tempo.
Desde Sass 3.3, podemos escrever coisas assim:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Contanto que as regras CSS sejam curtas e o seletor de base simples, a legibilidade permanece boa. Mas quando as coisas ficam mais complexas, essa sintaxe torna difícil descobrir o que está acontecendo. Por causa disso, podemos ficar tentados a construir dois mixins de invólucro para nossa sintaxe 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; ) )Reescrevendo nosso exemplo anterior com nossos novos 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` */ ) ) )Observe que as aspas em torno das strings são opcionais, nós apenas as adicionamos para facilitar a leitura extra.
Agora, se você sentir vontade elemente modifierfor muito comprido para digitar, pode criar dois aliases mais curtos como:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Usando aliases:
.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` */ ) ) )