BEM-Methodik. Was ist das und wie arbeitet man damit?

Einführung in BEM

BEM (Block, Element, Modifier) ist eine Methodik zur Codeorganisation, die Entwicklern hilft, benutzerfreundliches und leicht zu wartendes CSS und HTML zu schreiben. Sie wurde von Yandex entwickelt, um das Problem der komplizierten Stile und der Komplexität bei der Skalierung von Webanwendungen zu lösen.

Stell dir vor, du baust einen Konstruktionssatz, und jedes Stück Code ist ein Block oder Element, das leicht ersetzt, geändert oder verbessert werden kann. BEM macht den Code modular und verständlich, was besonders nützlich ist, wenn du in einem Team arbeitest oder sich das Projekt über viele Jahre entwickeln wird. BEM hilft, Verwirrung zu vermeiden und Ordnung im Code zu halten, auch wenn Dutzende von Entwicklern an dem Projekt beteiligt sind. 🎯

Grundkonzepte von BEM

Die BEM-Methodik basiert auf drei Schlüsselkonzepten:

1. Block

Ein Block ist ein unabhängiges, eigenständiges Element der Benutzeroberfläche, das wiederverwendet werden kann. Zum Beispiel sind eine Schaltfläche, ein Formular, ein Menü alles Blöcke. Blöcke können ineinander verschachtelt sein, bleiben aber unabhängig.

Blockbeispiel:

<div class="button">Купить</div>

Blöcke sind die grundlegenden Bausteine, aus denen die Benutzeroberfläche aufgebaut ist. Sie können Elemente enthalten, die vom Block abhängig sind und nicht separat existieren können.

2. Element

Ein Element ist ein Teil eines Blocks, der nicht getrennt von ihm existieren kann. Elemente helfen dabei, einen Block in seine Bestandteile zu zerlegen, wobei Elemente immer zu einem bestimmten Block gehören. Sie fügen zusätzliche Funktionen und visuelle Komponenten hinzu, bleiben aber an ihren Block gebunden.

Beispiel für ein Element:

<div class="button">
  <span class="button__text">Купить</span>
</div>

Hier ist button__text ein Element des Blocks button. Achten Sie auf die beiden Unterstriche (__) - dies ist die Standardbezeichnung für ein Element in BEM. Diese Benennung hilft, Stilkonflikte zu vermeiden und sofort zu verstehen, welcher Block dieses Element enthält.

3. Modifikator (Modifier)

Ein Modifikator ist eine Eigenschaft, die das Aussehen oder Verhalten eines Blocks oder Elements ändert. Ein Modifikator kann beispielsweise die Farbe einer Schaltfläche basierend auf ihrem Status ändern oder zusätzliche Funktionen hinzufügen.

Beispiel für einen Modifikator:

<div class="button button--active">Купить</div>

Hier ist button--active der Blockmodifikator button. Zwei Bindestriche (--) werden verwendet, um einen Modifikator anzuzeigen. Mit Modifikatoren können Sie die Eigenschaften eines Blocks hinzufügen oder ändern, ohne seine Grundstruktur zu verändern.

Warum brauchen wir BEM?

Tatsächlich kann Code auf verschiedene Arten geschrieben werden, und Sie haben wahrscheinlich bereits Stile gesehen, die schwer zu verstehen sind. 🤔 Wenn Klassen unverständliche Namen haben oder zu stark miteinander verbunden sind, wird das Bearbeiten eines solchen Codes zu einem echten Kopfzerbrechen.

BEM hilft bei der Lösung dieser Probleme:

• Erhöht die Lesbarkeit des Codes. Auch wenn Sie den Code zum ersten Mal sehen, können Sie anhand der Klassennamen leicht erkennen, was zu was gehört. Jede Klasse gibt einen vollständigen Überblick darüber, wie das Element in die Schnittstelle integriert ist.

• Vermeidet Stilkonflikte. Da jeder Block, jedes Element und jeder Modifikator einen eindeutigen Namen hat, überschneiden sich die Stile nicht zufällig. Dies ist besonders wichtig bei der Arbeit an großen Projekten, bei denen dieselben Stile in verschiedenen Teilen der Benutzeroberfläche verwendet werden können.

• Einfache Skalierung. Wenn das Projekt wächst, ist das Hinzufügen neuer Elemente oder Änderungen einfacher, da jeder Block und jedes Element klar voneinander getrennt sind. Wenn der Code nach der BEM-Methodik organisiert ist, ist er einfacher zu warten und zu erweitern, ohne befürchten zu müssen, die vorhandene Funktionalität zu beeinträchtigen.

• Vereinfacht die Zusammenarbeit. Dank klarer Namensregeln können alle Teammitglieder den Code leicht verstehen und damit arbeiten, auch wenn sie ursprünglich nicht an seiner Erstellung beteiligt waren.

Wie man mit BEM arbeitet

Um BEM zu verwenden, braucht man keine besonderen Kenntnisse. Alles, was man braucht, ist ein Verständnis von HTML und CSS sowie der Wunsch, den Code strukturierter zu organisieren. BEM lässt sich leicht in jedes Projekt integrieren und kann sowohl kleine als auch große Projekte vereinfachen.

Ein Beispiel für die Verwendung von BEM in der Praxis

Angenommen, wir haben eine Produktkarte. Stellen wir uns ihre Struktur mit BEM vor:

<div class="product-card">
  <div class="product-card__image">
    <img src="/path/to/image.jpg" alt="Product image">
  </div>
  <div class="product-card__details">
    <h3 class="product-card__title">Название товара</h3>
    <button class="product-card__button product-card__button--buy">Купить</button>
  </div>
</div>

Hier:

• product-card ist ein Block, der die gesamte Produktkarte darstellt. Es ist eine eigenständige Komponente, die leicht an andere Stellen verschoben oder wiederverwendet werden kann.

• product-card__image und product-card__details sind Elemente, die zum Block product-card gehören. Sie beschreiben verschiedene Teile der Karte und sind vom Block abhängig.

• product-card__button--buy - ein Schaltflächenmodifikator, der das Verhalten der Schaltfläche ändern kann (z. B. grün für einen Aufruf zum Handeln). Dies ist nützlich, wenn Sie verschiedene Versionen desselben Elements erstellen müssen, ohne die Basisklasse zu ändern.

Vor- und Nachteile der Verwendung von BEM

Vorteile:

1. Lesbarkeit und Verständlichkeit. Klassen haben eine logische Struktur und beschreiben, wozu sie gehören, was ihr Verständnis vereinfacht.

2. Einfach zu pflegen und zu entwickeln. Der nach BEM geschriebene Code ist leicht zu erweitern. Neue Blöcke und Elemente werden hinzugefügt, ohne dass die Gefahr besteht, dass die vorhandene Funktionalität beeinträchtigt wird.

3. Minimierung von Stilkonflikten. Dank der eindeutigen Klassennamen ist die Möglichkeit zufälliger Überschneidungen in Stilen ausgeschlossen.

4. Vielseitigkeit. Die Methodik eignet sich sowohl für kleine als auch für große Projekte. Sie sorgt für Ordnung im Projekt, unabhängig von dessen Umfang.

Nachteile:

1. Redundanz von NamenLange Klassennamen mögen zunächst unpraktisch erscheinen, helfen aber, Konflikte und Verwirrung zu vermeiden.

2. Erfordert Disziplin. Um BEM vollständig einzuhalten, müssen Sie die Benennung und Struktur der Klassen sorgfältig überwachen, was einige Zeit in Anspruch nehmen kann, bis Sie sich daran gewöhnt haben.

Welche Fähigkeiten sind für die Arbeit mit BEM erforderlich?

Um mit der BEM-Methodik zu arbeiten, benötigst du Grundkenntnisse in HTML und CSS. Hier sind einige wichtige Dinge, die helfen können:

• CSS-Klassen verstehen. Sie müssen in der Lage sein, Klassen zu erstellen und sie richtig zu benennen. Dies ist die Grundlage für die Arbeit mit BEM, da die gesamte Struktur der Methodik auf Klassennamen basiert.

• Der Wunsch, den Code zu organisieren. BEM steht für Struktur und Ordnung, daher ist es sehr wichtig, den Code sauber und logisch zu gestalten. Je sorgfältiger du beim Erstellen von Blöcken und Elementen vorgehst, desto einfacher wird es, das Projekt später zu pflegen.

• Kenntnis der Prinzipien der Modularität. BEM teilt die gesamte Benutzeroberfläche in unabhängige Blöcke auf, daher ist es wichtig, in kleinen Komponenten zu denken. Jede Komponente muss autonom sein und darf nicht von anderen Teilen der Schnittstelle abhängen.

• TeamfähigkeitWenn Sie in einem Team arbeiten, macht das Verständnis und die Verwendung von BEM die Arbeit für alle Beteiligten koordinierter und verständlicher.

Befund

Die BEM-Methodik hilft dir, deinen Code strukturierter, lesbarer und einfacher zu pflegen. ✨ Auch wenn es dir jetzt zu kompliziert erscheint, glaube mir — sobald du anfängst, BEM zu verwenden, wird es einfacher und angenehmer, den Code zu organisieren. BEM schafft klare Regeln, die leicht zu befolgen sind, was die Entwicklung effizienter und verständlicher macht.

Darüber hinaus hilft BEM, typische Fehler im Zusammenhang mit verwechselten Stilen und unpraktischen Klassennamen zu vermeiden. Dies ist besonders wichtig, wenn ein Projekt wächst und viele Entwickler daran beteiligt sind. Jeder Block und jedes Element ist klar voneinander getrennt, und ihre eindeutigen Namen vermeiden Konflikte und Missverständnisse. Wenn ein Projekt größer wird, hilft die von BEM vorgeschlagene Struktur, neue Funktionen einfach hinzuzufügen und alte zu unterstützen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Grundprinzipien von BEM zu verstehen und Sie dazu inspiriert hat, diese Methodik in Ihren Projekten anzuwenden! Wenn du gerade erst mit der Webentwicklung beginnst, versuche, BEM auf kleine Beispiele anzuwenden, um seine Vorteile in der Praxis zu spüren. Du wirst sehen, wie die Codeorganisation einfacher und verständlicher wird. 😊

Wenn Sie sich für dieses Thema interessieren, schreiben Sie uns und wir werden einen Minikurs über die Arbeit mit BEM in möglichst einfacher und verständlicher Sprache erstellen! 💻📚