BEM - sauberer CSS Code dank Namenskovention

Strukturierter und nachvollziehbarer CSS-Code

Für kleinere, weniger umfangreiche und damit auch weniger komplexe Websites stellt das Styling keine größere Herausforderung dar und lässt sich meist mit ordentlichen zusammengefassten CSS Sylesheets bewerkstelligen. Für größere und komplexere Web-Projekte ist verständlicher, nachvollziehbarer und gut strukturierter Code jedoch ein kritischer Erfolgsfaktor. CSS konsequent einem festgelegten System und Nomenklatur folgend anzulegen birgt sowohl für die WebEntwicklung an sich als auch für den späteren Betrieb der Website Vorteile. Ein gutes System beeinflusst die Menge an Code, die zu schreiben ist, und auch mit wie viel Aufwand das Definieren der Styles in CSS verbunden ist. Im Betrieb der Website bestimmt der Code maßgeblich wie viel durch den Browser initial geladen werden muss. Besonders in einem Entwickler-Team ist es unbedingt sinnvoll, sich auf eine Vorgehensweise zu einigen.

BEM bringt Ordnung in den CSS Code

BEM ist eine Namenskonvention für CSS-Klassen, die es erlaubt, Styles modular und nachvollziehbar zu strukturieren. Die Abkürzung BEM steht dabei für „Block-Element-Modifier“, die drei Teile, aus denen ein Klassenname innerhalb dieser Nomenklatur bestehen kann. Die Notation lautet 'block__element--modifier'. Der Block ist ein Objekt, das auch alleinstehend eine sinnvolle Bezeichnung darstellt. Das Element ist Teil des Blocks, kann nur innerhalb dessen existieren und hat ohne die Verbindung mit dem Block keine eindeutige Bedeutung. Der Modifier kann sowohl lediglich auf den Block angewendet werden ('block--modifier') oder aber auf Block und Element ('block__element--modifier'). Der Modifier setzt ein Kennzeichen auf Block oder Element und wird genutzt um das Verhalten oder die Optik anzupassen.

Block

Ein Block ist ein autarkes Objekt innerhalb eines Web-Projekts und kann somit auch ohne das Element oder den Modifier stehen. Blocks können auch miteinander verschachtelt sein und gemeinsam wirken. Sie sind semantisch gleichwertig und es gibt keine Hierarchie unter ihnen. Ein Button ist ein gutes Beispiel für einen Block. Dieser Button kann dann als Block in der Bezeichnung der Klasse alleine stehen, 'button', oder eben durch ein Element und/oder Modifier ergänzt werden, 'button__submit', 'button--disabled' oder 'button__submit--disabled'. Jede DOM Node in HTML, die eine Klasse erlaubt, kann eine Block sein.

Element

Dies ist ein untergeordnetes Element, das nur innerhalb eines Blocks existiert und für sich alleine keine Bedeutung hat. Beispiele für Elemente von Blocks sind beispielsweise 'button__submit' oder auch 'checkbox__caption'. Das Element bezieht sich hier also immer zwingend auf den Block. Jede DOM Node innerhalb eines Blocks kann ein Element sein und innerhalb des Blocks sind alle Elemente semantisch gleichwertig. Bei der Notation in CSS sind nur Klassen-Selektoren zu verwenden und keine Tags oder IDs. Genauso sollten keine Abhängigkeiten zwischen Blocks/Elementen auf einer Seite erstellt werden.

Modifier

Dieses Kennzeichen erlaubt es, zusätzliche Varianten für Block oder Element zur Verfügung zu stellen. Modifier können zum Beispiel wie folgt das Verhalten oder Aussehen verändern: 'button__submit--disabled' oder aber auch 'checkbox--size-big'. Der Modifier ist ein zusätzlicher Klassenname der zu einem Block oder Element in der DOM Node hinzugefügt wird. Modifier-Kennzeichen sollten lediglich bei dem Block oder Element ergänzt werden, wo die Anpassung stattfinden soll und auch die Original-Klasse sollte beibehalten werden. Innerhalb des CSS verwendet man den Modifier-Klassenamen (.block--modifier { }) oder den Element-Modifier-Klassennamen (.block__element--modifier { }) als Selektor.

BEM - 6 Argumente für die Anwendung

Eine konsequent angewendete Namenskonvention für CSS bringt langfristige Struktur und Nachvollziehbarkeit. Außerdem wird der Aufwand des Schreibens des CSS Codes minimiert und dadurch der Betrieb der Website optimiert.

1. Weite Verbreitung

BEM ist eine der bekanntesten und am häufigsten angewendeten CSS Namenskonventionen. Besonders bei der Arbeit in Teams oder mit externen Partnern erleichtert dies vieles in der Zusammenarbeit, da BEM in der Regel bereits bekannt ist. Bei eventuellen Weiterentwicklungen und späteren Anpassungen stellt BEM auch für den Kunden eine große Flexibilität her, da die meisten Web-Entwickler mit der Nomenklatur von BEM vertraut sind und keine Einarbeitung notwendig ist.

2. Modulares System

Die Bock-Styles sind völlig autark und unabhängig von allen anderen Elementen einer Seite. Dadurch kann man Probleme mit aufeinander aufbauenden Codes innerhalb von CSS praktisch ausschließen. Das Aufsetzen unabhängiger Blocks auf verschiedene Art und Weise und das intelligente, wiederholte Einsetzen reduziert die Menge an CSS Code deutlich. Zudem können die einzelnen modularen Blocks aus einem finalisierten Web-Projekt problemlos in eine neue Web-Entwicklung übertragen werden.

3. Verständlich und gut lesbar

Durch die in Nomenklatur von BEM werden „sprechende“ Klassennamen vergeben, die das CSS Stylesheet so stabil und selbsterklärend für alle an der Entwicklung Beteiligten lesbar machen. Die bei der Anwendung von BEM verwendeten Selektoren sind klar strukturiert und können besser und schneller verarbeitet werden als teilweise tief verschachtelte, reguläre CSS Styles.

4. Leicht erweiterbar

Da die Ausprägungen der CSS-Selektoren mit BEM minimal gehalten werden, können weitere Style-Variationen komfortabel hinzugefügt werden. In den allermeisten Fällen ist es ausreichend, eine weitere Klasse mit einem Modifikator zu ergänzen.

5. Anpassungsfähig

Da BEM besonders seine Stärke „Modularität“ ausspielt, kann es mühelos in Verbindung mit verschiedenen Frameworks eingesetzt werden. Weitere Vorteil: das CSS Styling bleibt mit BEM unabhängig vom Typ und auch der Verschachtelung der Elemente innerhalb des Codes. Das macht es stabil und weniger anfällig gegen Änderungen der Dokumentenstruktur.

6. Sichert Qualität

Die Verwendung jeglicher Namenskonvention im Rahmen von Software- und Web-Entwicklung erfordert eine konsequentes sowie durchdachtes Vorgehen. Auch der Einsatz von BEM kann immer wieder schwierig werden und dann ein bewusstes Durchdenken sowie Planen der Klassennamen und der CSS Styles erforderlich machen. Die stetige Auseinandersetzung mit den Details verbessert so aber unweigerlich die Qualität des erstellten Codes.

Die Namenskonvention mit BEM bringt Struktur, Flexibilität und Qualität

Richtlinien, Handbücher und Styleguides steigern die Entwicklungsgeschwindigkeit, erleichtern das Debugging und auch Erweiterungen oder neue Features lassen sich mit festen Regelwerken sicher in Altsystemen integrieren. Der gänzliche Verzicht auf eine Nomenklatur macht den CSS Code im laufenden Betrieb fast immer nur schwer pflegbar.

Das Festlegen auf BEM als Namenskonvention im Rahmen einer Web-Entwicklung gibt jedem Mitwirkenden eine Richtlinie an die Hand und es wird eine gemeinsame Basis für den Code verwendet, der für alle verständlich ist. Dies ist ebenfalls eine solide Grundlage für eventuell spätere Erweiterungen und Anpassungen des Designs der Website.

Sie haben weitere Fragen zum BEM und CSS Namenskonventionen in der Web-Entwicklung? Sie interessieren sich für nachhaltige und individuelle Webentwicklung? Sprechen Sie uns an! Wir beraten Sie gerne ausführlich in unserer Internetagentur mindtwo in Bonn. Wir freuen uns auf Ihre Nachricht.