La mejor introducción a BEM es de Harry Roberts:
BEM, que significa bloque, elemento, modificador, es una metodología de nomenclatura de front-end ideada por los chicos de Yandex. Es una forma inteligente de nombrar sus clases CSS para darles más transparencia y significado a otros desarrolladores. Son mucho más estrictos e informativos, lo que hace que la convención de nomenclatura BEM sea ideal para equipos de desarrolladores en proyectos más grandes que pueden durar un tiempo.
Desde Sass 3.3, podemos escribir cosas como esta:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Siempre que las reglas de CSS sean cortas y el selector básico sea simple, la legibilidad permanece bien. Pero cuando las cosas se vuelven más complejas, esta sintaxis hace que sea difícil averiguar qué está pasando. Debido a esto, podríamos tener la tentación de construir dos mixins de envoltura para nuestra sintaxis 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; ) )Reescribiendo nuestro ejemplo anterior con nuestros nuevos 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` */ ) ) )Tenga en cuenta que las comillas alrededor de las cadenas son opcionales, solo las agregamos para mayor legibilidad.
Ahora, si le apetece elementy modifieres demasiado largo para escribir, puede crear dos alias más cortos así:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Usando 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` */ ) ) )