Es gibt verschiedene Methoden, die heutzutage eingesetzt werden, um CSS-Code zu reduzieren und ihn wartungsfreundlicher zu gestalten. In diesem Artikel werden wir eine solche Methodik kennenlernen, die als BEM bezeichnet wird. Diese Methodik eignet sich hervorragend, um den Entwicklungsprozess zu beschleunigen und die Teamarbeit von Entwicklern zu erleichtern, indem CSS-Klassen effizient in unabhängige Module angeordnet werden. Die BEM-Methodik verbessert die Wartbarkeit des Codes und beschleunigt den Entwicklungsprozess.

Werfen wir einen Blick auf die verschiedenen Aspekte dieser Methodik und passen wir sie an unsere Arbeitsprozesse an, um unsere Arbeitsziele zu erreichen. 

Was ist Block Element Modifier (BEM)?

BEM steht für Block Element Modifier (Block Element Modifikator). Es handelt sich um eine Designmethodik, die bei der Erstellung wiederverwendbarer Komponenten und der gemeinsamen Nutzung von Code in der Frontend-Entwicklung hilft. Es ist ein System von Methoden, das beim Schreiben von HTML- und CSS-Code hilft, so dass er leicht wiederverwendet und sogar mit anderen Teilen des Codes geteilt werden kann. In großen, unabhängigen Teams steigert es die Produktivität und erleichtert die Teamarbeit.

Lassen Sie uns dies im Folgenden detaillierter betrachten.

Blöcke:  Ein Block repräsentiert ein Objekt auf einer Website. Wir können ihn uns als größere, strukturelle Codeblöcke vorstellen. Heutzutage sind die häufigsten Blöcke auf jeder Website Inhalt, Header, Footer, Seitenleiste und Suche. Blöcke in BEM sind ein Ausgangspunkt für die Verkettung von CSS-Klassen. Ein Inhalt, ein Menü, ein Suchformular sind einige Beispiele für Blöcke. 

Element: Ein Element ist eine Komponente innerhalb des Blocks, die eine bestimmte Funktion erfüllt. Die Teile eines Blocks, die außerhalb des Blocks keine semantische Bedeutung haben, sind Elemente. Ein Inhaltsartikel, ein Menüpunkt, ein Suchfeld sind einige Beispiele.

Modifikator: Ein Modifikator ist eine Möglichkeit, die Variationen eines Blocks darzustellen. Wenn jemand Bootstrap verwendet hat, dann wären die Schaltflächengrößen das beste Beispiel. Nun, Schaltflächengrößen sind Größenvariationen der Schaltfläche selbst, was sie zum Modifikator macht. Ein hervorgehobener Inhaltsartikel, ein Menülink, ein Suchfeld mit oder ohne Symbol sind einige Beispiele. 

Warum BEM wählen?

Betrachten wir nun einige der Vorteile dieser Methodik.

• BEM ist außergewöhnlich, wenn es um die Wartung geht. Sehr häufig stellen Fachleute fest, dass es schwierig ist, nach jemandem an einem großen Projekt zu arbeiten und Änderungen vorzunehmen, ohne dass etwas Unbekanntes zusammenbricht. Aber bei der Verwendung von BEM erfährt man genau den Zweck des Elements und auch, in welchem Block es erscheinen könnte.
• Wir stellen fest, dass Klassennamen logisch und intuitiv sind und jedes Mitglied des Teams genau weiß, was das Element auf der Website bewirkt. BEM neigt also dazu, jedem in einem Projekt eine deklarative Syntax zu geben, die er gemeinsam nutzen kann, so dass alle auf dem gleichen Stand sind.
• BEM hilft bei der Eliminierung von verschachtelten CSS-Selektoren. Jedes einzelne HTML-Element hat seine eigene CSS-Klasse, und anhand ihres Namens erfährt man etwas über ihren Zweck. 

Fazit

Zusammenfassend lässt sich sagen, dass BEM eine Sammlung von Methoden und Ideen ist, eine Methodik, die jedes Unternehmen und jedes Team schrittweise in seinen bestehenden Workflow integrieren und feststellen kann, was für sie am besten funktioniert.