BEM-Mixins

Die beste Einführung in BEM gibt es von Harry Roberts

BEM – bedeutet Block, Element, Modifier – ist eine Front-End-Namensgebungsmethodik, die sich die Jungs von Yandex ausgedacht haben. Es ist eine intelligente Methode, Ihre CSS-Klassen zu benennen, um ihnen mehr Transparenz und Bedeutung für andere Entwickler zu verleihen. Sie sind weitaus strenger und informativer, was die BEM-Namenskonvention ideal für Entwicklungsteams bei größeren Projekten macht, die eine Weile dauern könnten.

Seit Sass 3.3 können wir Dinge so 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 CSS-Regeln kurz sind und der Basisselektor einfach ist, bleibt die Lesbarkeit in Ordnung. Aber wenn die Dinge komplexer werden, macht diese Syntax es schwer zu erkennen, was vor sich geht. 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 zusätzlichen Lesbarkeit hinzu.

Wenn Sie nun der Meinung sind, dass element und modifier zu lang zum Tippen sind, können Sie zwei kürzere Aliase erstellen, wie folgt:

/// @alias element
@mixin e($element) {
    @include element($element)  {
        @content;
    }
}

/// @alias modifier
@mixin m($modifier) {
    @include modifier($modifier) {
        @content;
    }
}

Verwendung von Aliassen

.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` */
        }
    }
}