Was ist bem?

Der Begriff "BEM" steht für Block, Element, Modifier und ist eine Methode zur Entwicklung von Modularität und Wiederverwendbarkeit von HTML und CSS. Es wurde von einem Entwicklerteam bei Yandex entwickelt und ist mittlerweile eine weit verbreitete Methode im Webdesign.

• Block: Ein Block stellt einen eigenständigen, wiederverwendbaren Teil einer Webseite dar. Jeder Block hat einen eindeutigen Namen, der als Klasse definiert wird. Zum Beispiel kann ein Block mit dem Namen "header" den oberen Teil einer Webseite repräsentieren.
• Element: Ein Element ist ein Teil eines Blocks und kann nur innerhalb dieses Blocks verwendet werden. Elemente sollen spezifische Styling-Regeln enthalten und werden ebenfalls als Klassen definiert. Zum Beispiel kann ein Element mit dem Namen "logo" innerhalb des Blocks "header" verwendet werden, um das Logo anzuzeigen.
• Modifier: Ein Modifier wird verwendet, um den visuellen oder verhaltensbezogenen Zustand eines Blocks oder Elements zu ändern. Modifier-Klassen werden durch Hinzufügen des Präfixes "is-" oder "has-" erstellt. Zum Beispiel kann ein Modifier mit dem Namen "is-active" verwendet werden, um den aktiven Zustand eines Links darzustellen.

Die Verwendung von BEM bietet verschiedene Vorteile, darunter eine klare Struktur, einfache Wartung und Erweiterbarkeit des Codes, verbesserte Zusammenarbeit zwischen Frontend-Entwicklern und eine bessere Lesbarkeit des Codes für Entwickler. BEM ermöglicht auch eine effiziente Entwicklung von responsive Webseiten, da Blöcke und Elemente unabhängig voneinander gestaltet und angepasst werden können.