Die beste Einführung in BEM stammt von Harry Roberts:
BEM - Block, Element, Modifikator - ist eine Front-End-Benennungsmethode, die von den Mitarbeitern von Yandex entwickelt wurde. Es ist eine clevere Möglichkeit, Ihre CSS-Klassen zu benennen, um anderen Entwicklern mehr Transparenz und Bedeutung zu verleihen. Sie sind weitaus strenger und informativer, was die BEM-Namenskonvention ideal für Entwicklerteams bei größeren Projekten macht, die eine Weile dauern können.
Seit Sass 3.3 können wir folgende Dinge schreiben:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Solange die CSS-Regeln kurz sind und die Basisauswahl einfach ist, bleibt die Lesbarkeit in Ordnung. Aber wenn die Dinge komplexer werden, macht es diese Syntax schwierig herauszufinden, was los ist. Aus diesem Grund könnten wir versucht sein, zwei Wrapper-Mixins für unsere BEM-Syntax zu erstellen:
/// 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; ) )Umschreiben unseres vorherigen Beispiels mit unseren brandneuen 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` */ ) ) )Beachten Sie, dass Anführungszeichen um Zeichenfolgen optional sind. Wir fügen sie nur zur besseren Lesbarkeit hinzu.
Wenn Sie Lust haben elementund modifierzu lang zum Tippen sind, können Sie zwei kürzere Aliase wie folgt erstellen:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Verwenden von Aliasen:
.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` */ ) ) )