De beste introductie tot BEM is van Harry Roberts:
BEM - wat blok, element, modifier betekent - is een front-end naamgevingsmethodologie die is bedacht door de jongens van Yandex. Het is een slimme manier om uw CSS-klassen een naam te geven om ze meer transparantie en betekenis te geven aan andere ontwikkelaars. Ze zijn veel strikter en informatief, waardoor de BEM-naamgevingsconventie ideaal is voor teams van ontwikkelaars bij grotere projecten die een tijdje kunnen duren.
Sinds Sass 3.3 kunnen we dit soort dingen schrijven:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Zolang CSS-regels kort zijn en basisselector eenvoudig is, blijft de leesbaarheid in orde. Maar wanneer dingen complexer worden, maakt deze syntaxis het moeilijk om erachter te komen wat er aan de hand is. Hierdoor kunnen we in de verleiding komen om twee wrapper-mixins te bouwen voor onze BEM-syntaxis:
/// 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; ) )Ons vorige voorbeeld herschrijven met onze gloednieuwe 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 op dat aanhalingstekens rond strings optioneel zijn, we voegen ze alleen toe voor extra leesbaarheid.
Als je nu zin hebt elementen modifierte lang bent om te typen, kun je als volgt twee kortere aliassen maken:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Aliassen gebruiken:
.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` */ ) ) )