Einführung in die BEM-Methodik

Was ist BEM-Methodik?

Wenn Sie kleinere Websites erstellen, ist es normalerweise kein großes Problem, wie Sie Ihre Stile organisieren. Sie erstellen Ihre üblichen Dateien, schreiben das gesamte benötigte CSS, und das ist alles. Bei größeren, komplexeren Projekten ist es jedoch entscheidend , wie Sie Ihren Code organisieren. Die Strukturierung des Codes ist umso wichtiger, wenn Sie in einem Team arbeiten, das aus mehreren Frontend- und Backend-Entwicklern besteht.

Heutzutage gibt es viele Methoden mit dem Ziel, CSS-Code zu reduzieren und Ihren CSS-Code wartbarer zu machen. In diesem Artikel werde ich eines davon erläutern und einige Beispiele liefern: BEM. BEM steht für Block Element Modifier . Die Hauptidee dahinter ist, den Entwicklungsprozess zu beschleunigen und die Teamarbeit von Entwicklern zu erleichtern, indem CSS-Klassen in unabhängigen Modulen angeordnet werden. Wenn Sie jemals einen Klassennamen wie header__form--search haben, dann ist das BEM in Aktion. Ja, Klassen können sehr lang benannt werden, aber sie sind alle lesbar und verständlich.

Beachten Sie, dass es am besten ist, BEM nur mit Klassen und nicht mit IDs zu verwenden, da Klassen es Ihnen ermöglichen, Namen bei Bedarf zu wiederholen und eine konsistentere Codierungsstruktur zu erstellen. Wenn Sie Ihre Website in organisierte Module aufteilen möchten, sollte sie aus derselben Struktur bestehen: Block, Element und Modifikator. Wobei jeder Block mehrere Elemente haben kann und sowohl Block als auch Elemente mehrere Modifikatoren haben können. Beginnen wir jedoch zunächst mit der grundlegenden BEM-Struktur und erläutern diese anhand von Beispielen.

Block

Ein Block repräsentiert ein Objekt auf Ihrer Website. Betrachten Sie es als größere strukturelle Teile Ihres Codes. Die häufigsten Blöcke auf jeder Website sind heute Kopfzeile, Inhalt, Seitenleiste, Fußzeile und Suche. Blöcke in BEM sind immer ein Ausgangspunkt für die Verkettung Ihrer CSS-Klassen. Schauen Sie sich ein paar Blockbeispiele an:

• ein Inhalt
• Ein Menü
• ein Suchformular

 .content {/* Styles */} .menu {/* Styles */} .search {/* Styles */}

Element

Ein Element ist eine Komponente innerhalb des Blocks, die eine bestimmte Funktion ausführt. Es sollte nur im Kontext seines Blocks Sinn machen:

• ein Inhaltsartikel
• ein Menüpunkt
• ein Sucheingabefeld

 .content__article {/* Styles */} .menu__item {/* Styles */} .search__input {/* Styles */}

Modifikator

Mit einem Modifikator stellen wir die Variationen eines Blocks dar. Wenn Sie jemals Bootstrap verwendet haben, sind die Schaltflächengrößen das beste Beispiel. Schaltflächengrößen sind nur Größenvariationen der Schaltfläche selbst, was sie zum Modifikator macht:

• ein inhaltsbezogener Artikel
• ein Menülink
• ein Suchfeld mit oder ohne Icon

 .content__article--featured {/* Styles */} .menu__item--link {/* Styles */} .search__input--icon {/* Styles */}

Regeln der Namensgebung

Der Hauptzweck der BEM-Methodik besteht darin, Namen von CSS-Selektoren so informativ und transparent wie möglich zu machen. Der ursprüngliche BEM-Stil wird folgendermaßen definiert:

Der Blockname ist normalerweise ein einzelnes Wort wie .header , aber wenn Sie eine längere Blockdefinition haben, wird er durch einen einzelnen Bindestrich getrennt - :

 .lang-switcher {/* Styles */}

Der Elementname beginnt mit einem doppelten Unterstrich __ :

 .lang-switcher__flag {/* Styles */}

Der Modifikatorname beginnt mit einem einzelnen Unterstrich _ :

 .lang-switcher__flag_basic {/* Styles */}

Es gibt nur eine sehr kritische Regel in der BEM-Methodik – ein Modifikator kann nicht außerhalb des Kontexts seines Eigentümers verwendet werden.

Beispiel:

 .btn_big {/* Styles */}

Sie können btn_big nur verwenden, wenn auch Header definiert ist.

Schlechtes Beispiel:

 <div class=”btn_big”>...</div>

Gutes Beispiel:

 <div class=”btn btn_big”>...</div>

Neben diesen ursprünglichen BEM-Stilen gibt es alternative Namensschemata wie Harry Roberts und CamelCase-Stile.

Beispiel für den Stil von Harry Roberts:

 .block-name__element-name--modifier-name {/* Styles */}

Beispiel für CamelCase-Stil:

 .BlockName__ElementName_ModifierName {/* Styles */}

Es gibt auch einige andere, aber diese beiden sind die häufigsten. Ich persönlich bin ein Fan der von Harris Roberts vorgeschlagenen Namenskonvention, die folgende Regeln hat:

• Namen werden klein geschrieben
• Wörter in den Namen von BEM-Einheiten werden durch einen Bindestrich getrennt -
• Ein Elementname wird von einem Blocknamen durch einen doppelten Unterstrich __ getrennt
• Boolesche Modifikatoren werden durch doppelte Bindestriche getrennt --
• Modifikatoren für Schlüsselwerttypen werden nicht verwendet

Der Grund, warum diese Namenskonvention viel besser formuliert ist als andere, ist, dass Sie das Modifikatorelement leicht von anderen unterscheiden können. In den ursprünglichen Namenskonventionen würde Modifikator wie folgt definiert:

 .block__element_modifier {/* Styles */}

Aber wie Sie sehen können, gibt es keinen großen Unterschied zwischen einem einfachen und einem doppelten Unterstrich. Auf der anderen Seite sorgt der doppelte Bindestrich für eine saubere Trennung, und Sie können den Modifikator sofort sehen:

 .block__element--modifier {/* Styles */}

BEM-Beispiel in verschiedenen Formaten

Bitte beachten Sie, dass BEM neben CSS auch sehr nützlich ist, um Ihre JSON-, XML-, Baumdateien oder andere Formate zu organisieren, die Verschachtelungen unterstützen. Betrachten Sie die BEM-Methodik als eine gute Möglichkeit, Ihre Benutzeroberfläche zu erstellen.

Betrachten wir den folgenden HTML-Code, der im BEM-Format strukturiert ist:

 <header class=”header”> <img class=”header__logo”> <form class=”header__search-from”> <input class=”header__search-from__input” type=”input”> <button class=”header__search-from__button” type=”button”> </form> <div class=”header__lang-switcher”></div> </header>

Dasselbe kann mit dem JSON- und XML-Format erreicht werden.

XML:

 <block:header> <block:logo/> <block:search-from> <block:input/> <block:button/> </block> <block:lang-switcher/> </block>

JSON:

 { block: 'header', content: [ { block: 'logo' }, { block: 'search-form', content: [ { block: 'input' }, { block: 'button' } ] }, { block: 'lang-switcher' } ] }

Dateisystemorganisation eines BEM-Projekts

In BEM ist es wichtig, Ihre Dateien richtig zu organisieren. BEM bietet Ihnen nicht nur eine großartige Organisation von CSS-Klassen und macht sie vollständig verständlich, sondern gibt Ihnen auch eine sehr wartbare Dateistruktur. Nehmen wir ein Beispielprojekt, das die BEM-Dateiorganisationstechnik mit SASS-Dateien verwendet:

 blocks/ input/ __box/ --big/ input__box--big.scss input__box.scss button/ --big/ button--big.scss

Wie Sie oben sehen können, ist alles klar und organisiert, wenn Sie nur die Unterordnerstruktur in Ihrem Hauptordner sehen. Auf diese Weise macht es keinen Unterschied, wer nach Ihnen arbeitet oder ob Sie nach jemandem arbeiten, denn es ist unglaublich einfach, demselben Muster zu folgen.

Aufteilung des BEM-Projekts in Plattformen

Neben der einfachen Organisation Ihrer Dateien mit BEM-Methodiktechniken können Sie auch auf spezifischere Dinge eingehen. Wenn Sie beispielsweise ein Webprojekt erstellen, das vollständig reaktionsfähig sein soll, und der Kunde angegeben hat, dass einige Blöcke auf dem Mobilgerät völlig anders sind als auf Desktop-Geräten, wäre es am besten, Ihre BEM-Ordnerstruktur in Plattformen zu unterteilen. Beispiel für die Organisation von Schaltflächen auf verschiedenen Plattformen:

 common.blocks/ button/ button.scss desktop.blocks/ button/ buttons.scss mobile.blocks/ button/ button.scss

Beachten Sie, dass dies nur ein Beispiel ist, wenn Sie Ihr gesamtes Projekt mit der BEM-Methodik organisieren möchten. Der Dateibaum mit BEM-Struktur ist nicht zwingend erforderlich, um BEM korrekt zu verwenden, Sie können BEM nur in einigen Segmenten des Projekts verwenden. Bisher habe ich diese strenge Organisation der BEM-Dateistruktur nicht verwendet, bei der für jedes Element und jeden Modifikator eine eigene Datei erstellt wird. Stattdessen erstelle ich nur eine Dateistruktur für Blöcke, die eine Deklaration ihrer Elemente und Modifikatoren haben.

BEM in der Praxis

Da Sie nun mit Namenskonventionen vertraut sind, werde ich die BEM-Methodik in der Praxis demonstrieren. Nehmen wir an, wir haben diesen HTML-Code in Aktion:

 <a class=”btn btn--big btn--primary-color” href=”#” title=”Title”> <span class=”btn__price”>$3.99</span> <span class=”btn__text”>Product</span> </a>

Mit dem folgenden angewendeten CSS-Markup:

 .btn__price {/* Styles */} .btn__text {/* Styles */} .btn--big {/* Styles */} .btn--primary-color {/* Styles */}

Lassen Sie sich jetzt nicht täuschen. In unseren bisherigen Beispielen hatten wir fast immer einen Block, ein Element und einen Modifikator, was nicht immer der Fall sein muss.

Nehmen wir zum Beispiel an, wir haben einen Block namens person . Ein Mensch hat Beine und Hände, er kann auch weiblich oder männlich sein. Wenn wir eine männliche Person mit einer rechten Hand definieren wollen, sieht das so aus:

 .person--male__hand--right {/* Styles */}

Jetzt können Sie die wahre Bedeutung des BEM erkennen. Wir haben eine Person definiert, deren Modifikator ein Geschlecht ist. Da es egal ist, ob eine Person männlich oder weiblich ist, hat sie eine Hand, und Hand ist ein Element. Und wieder kann jede Person rechte oder linke Hand haben, was wiederum ein Modifikator ist.

In einem anderen Fall, wenn wir eine allgemeine Person mit einer Hand definieren wollen, werden wir es so machen:

 .person__hand {/* Styles */}

Wie Sie feststellen können, ist es sehr einfach, Ihre CSS- und HTML-Struktur damit zu strukturieren, sobald Sie sich mit BEM vertraut gemacht haben.

Verwenden von BEM mit CSS-Präprozessoren

Ich persönlich kann mir nicht vorstellen, ein neues Projekt zu starten, ohne einen der CSS-Präprozessoren zu verwenden. Wie Sie alle wissen, sind Präprozessoren eine großartige Sache und bieten uns viele Vorteile, und vor allem passen sie perfekt zur BEM-Methodik.

Im folgenden Beispiel sehen Sie das typischste Beispiel für BEM in Kombination mit SASS:

 .person { &__hand {/* Styles */} &__leg {/* Styles */} &--male { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } &--female { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } }

SASS-Code wird in das folgende CSS kompiliert:

 .person__hand {/* Styles */} .person__leg {/* Styles */} .person--male {/* Styles */} .person--male__hand {/* Styles */} .person--male__hand--left {/* Styles */} .person--male__hand--right {/* Styles */} .person--male__leg {/* Styles */} .person--male__leg--left {/* Styles */} .person--male__leg--right {/* Styles */} .person--female {/* Styles */} .person--female__hand {/* Styles */} .person--female__hand--left {/* Styles */} .person--female__hand--right {/* Styles */} .person--female__leg {/* Styles */} .person--female__leg--left {/* Styles */} .person--female__leg--right {/* Styles */}

Wenn Sie noch weiter gehen möchten, können Sie ein praktisches SASS-Mixins für BEM verwenden:

 /// Block Element /// @param {String} $element - Element's name @mixin element($element) { &__#{$element} { @content; } } /// Block Modifier /// @param {String} $modifier - Modifier's name @mixin modifier($modifier) { &--#{$modifier} { @content; } }

Und Sie können es so verwenden:

 .person { @include element('hand') {/* Person hand */} @include element('leg') {/* Person leg */} @include modifier('male') { /* Person male */ @include element('hand') { /* Person male hand */ @include modifier('left') { /* Person male left hand */ } @include modifier('right') { /* Person male right hand */ } } } }

Dadurch wird die folgende CSS-Ausgabe erzeugt:

 .person__hand { /* Person hand */ } .person__leg { /* Person leg */ } .person--male { /* Person male */ } .person--male__hand { /* Person male hand */ } .person--male__hand--left { /* Person male left hand */ } .person--male__hand--right { /* Person male right hand */ }

Ich weiß, dass Sie höchstwahrscheinlich keinen so langen Anwendungsfall haben werden, aber dies ist ein großartiges Beispiel dafür, wie BEM verwendet wird und warum es so leistungsfähig ist, sowohl in kleinen als auch in großen Projekten.

Starten Sie Ihr BEM-Projekt

Wie in der offiziellen BEM-Dokumentation erläutert, besteht der einfachste Weg, ein eigenes neues BEM-Projekt zu starten, darin, das vorhandene GIT-Repository zu verwenden. Verwenden Sie einfach den Git-Klonbefehl:

 $ git clone https://github.com/bem/project-stub.git

Als nächstes gehen Sie in ein neu erstelltes Verzeichnis und installieren alle Abhängigkeiten:

 $ npm install

Alle erforderlichen Abhängigkeiten werden installiert:

Erstellen Sie das Projekt mit ENB:

 $ node_modules/.bin/enb make

Führen Sie einen Servermodus für die Entwicklung aus:

 $ node_modules/.bin/enb server

Als Ergebnis erscheint folgende Meldung:

 Server started at 0.0.0.0:8080

Dies bedeutet nun, dass der Server betriebsbereit ist. Sie können jetzt die Ergebnisse für diese Adresse überprüfen:

 http://localhost:8080/desktop.bundles/index/index.html

Wie Sie sehen können, wurden bereits viele Elemente erstellt, die in der bemjson -Datei definiert sind, die sich hier befindet:

 project-stub/desktop.bundles/index/index.bemjson.js

Sie können die aktuelle Struktur der Datei sehen und untersuchen, die all diesen HTML-Code generiert, den Sie in Ihrer Datei localhost index.html sehen. Wir werden diese Datei ändern, um unser BEM-Projekt „Person“ zu erhalten, das wir in einem vorherigen Kapitel erklärt haben. Sie können den gesamten Code aus der Datei index.bemjson.js entfernen (oder kommentieren) und durch diesen ersetzen:

 module.exports = { block: 'page', title: 'Person BEM', favicon : '/favicon.ico', head : [ { elem : 'meta', attrs : { name : 'description', content : '' } }, { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } }, { elem : 'css', url : 'index.min.css' } ], scripts: [{ elem : 'js', url : 'index.min.js' }], content: [ { block: 'person', content: [ { elem: 'male', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Male person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Male person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Male person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Male person hand -- right' } ] }, { elem: 'female', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Female person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Female person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Female person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Female person hand -- right' } ] }, ] } ] };

Nun wird das folgende HTML generiert:

 <div class="person"> <div class="person__male"> <div class="person__leg person__leg_side_left"> Male person leg -- left </div> <div class="person__leg person__leg_side_right"> Male person leg -- right </div> <div class="person__hand person__hand_side_left"> Male person hand -- left </div> <div class="person__hand person__hand_side_right"> Male person hand -- right </div> </div> <div class="person__female"> <div class="person__leg person__leg_side_left"> Female person leg -- left </div> <div class="person__leg person__leg_side_right"> Female person leg -- right </div> <div class="person__hand person__hand_side_left"> Female person hand -- left </div> <div class="person__hand person__hand_side_right"> Female person hand -- right </div> </div> </div>

Wie Sie dem obigen Code entnehmen können, wurde in diesem Szenario das standardmäßige BEM-Codierungsschema verwendet, da wir nur die Standardeinstellungen verwenden, die BEM uns zur Verfügung gestellt hat. Es gibt viel mehr Befehle und Optionen, die Sie erkunden und verwenden können, z. B. das Erstellen neuer Seiten, Blöcke oder das Ändern von BEM-HTML. Ich werde nicht zu tief darauf eingehen, und alles kann in der offiziellen BEM-Dokumentation gefunden werden.

Vorteile und Bedenken

Vorteile

• BEM lässt sich hervorragend pflegen. Wie oft mussten Sie jemandem an einem großen Projekt hinterher arbeiten und haben einfach zu viel Angst, etwas zu ändern, ohne dass etwas Unbekanntes zusammenbricht? Wenn Sie BEM verwenden, kennen Sie den genauen Zweck des Elements und in welchem ​​Block es möglicherweise erscheint.
• Klassennamen sind logisch und intuitiv, und jedes Teammitglied weiß, was dieses Element auf der Website bewirkt. BEM gibt jedem in einem Projekt eine deklarative Syntax, die sie teilen können, damit sie auf der gleichen Seite sind.
• BEM beseitigt verschachtelte CSS-Selektoren. Jedes einzelne HTML-Element hat seine eigene CSS-Klasse, und am Namen erkennen Sie, wozu es dient. Ein Selektor, um sie alle zu beherrschen .

Bedenken und häufige Fehler

• Gehen Sie nicht zu tief in die Verschachtelung. Die Hauptregel sollte sein, nicht mehr als zwei Eltern- und Kindebenen zu verwenden.
• Achten Sie darauf, wo Sie Ihren Blockbereich beginnen. Ein häufiger Fehler ist hier, wenn ein Entwickler einen Block verwendet, aber nicht erkennt, dass derselbe Block zu einem späteren Zeitpunkt der Entwicklung einen übergeordneten Hauptblock haben wird, der möglicherweise gegen die Verschachtelungsregel verstößt.
• Vermeiden Sie SASS @extend. Um Harry Roberts dazu zu zitieren:

Sie können eine größere Anzahl von Kombinationen in der Ansicht erstellen, indem Sie Klassen in Sass nicht miteinander „verknüpfen“. Der HTML-Code hat einen viel besseren Papierpfad, da Sie sehen können, wie jede Klasse auf einen Teil des DOM wirkt. Ihr CSS bleibt viel schlanker, da Sie nicht jedes Mal neue Platzhalterklassen (oder die Manifestklassen, die sie kombinieren) erstellen müssen, wenn Sie eine neue Benutzeroberfläche erstellen möchten.

Fazit

Als ich das BEM-Codierungsschema zum ersten Mal sah, war mein erster Gedanke:

Diese Klassen sind einfach zu lang zum Schreiben und Lesen.

Aber nachdem ich es ausprobiert habe, kann ich mir jetzt nicht mehr vorstellen, ein neues Projekt zu starten, ohne es zu verwenden. Für mich hat BEM die Wartbarkeit meines Codes massiv verbessert, und ich kann mit Sicherheit sagen, dass jeder Entwickler, der in das BEM-basierte Projekt „geworfen“ wird, die gesamte Codestruktur sehr schnell einholen wird.

Trotz alledem wird in den sozialen Netzwerken viel über BEM diskutiert. Einige sagen, dass BEM nicht gut ist, und fragen sich, warum sie solche langen Namensklassen schreiben sollten, anstatt nur standardmäßige verschachtelte HTML-Elemente zu verwenden. Nun, niemand sagt, dass Sie BEM mögen müssen, aber Tatsache ist, dass die Mehrheit der Front-End-Entwickler es begrüßt und außerordentlich nützlich findet.