BEM

BEM- Block Element Modifier

Was ist BEM:

BEM oder auch Block Element Modifier genannt, ist eine Methodik um eine klare Struktur in den CSS-Code zu bringen. Mit dieser Methodik können die Styles von anderen Programmierern wiederverwendet werden und es erleichtert die Übersicht des vorhandenen Codes.

Diese Methodik ist eine sehr nützliche, starke und simple Art, den Umgang mit vorhandenen CSS-Dateien zu vereinfachen und diese besser verstehen zu können. Durch diese strikte Schreibweise, wird das Arbeiten vereinfacht.

Vorteile / Nachteile:

In der Anwendung von BEM sehe ich keinerlei Probleme. Die theoretischen Eigenschaften kann man schnell erlernen. Man hat viele Anlaufstellen und diese geben immer gut Auskunft. Ausserdem wird das CSS durch eine geringe Gewichtung sehr flach und Komponenten werden modular einsetzbar. Auch wenn man andere Projekte realisieren will, kann man dank der modularen Schreibweise ganz einfach schon geschriebene Komponenten kopieren und einfügen.

http://getbem.com/

https://css-tricks.com/bem-101/

Der schwierige Teil ist, dass man sich zuerst an die neue Schreibweise gewöhnen muss, denn man hat sonst immer eigene Bezeichnungen gebraucht. Man muss darauf achtgeben, wie man denn nun die Anweisungen benennt. Nach einer Weile denke ich, dass man sich daran gewöhnt und es ohne grosses Überlegen machen kann.

Anwendungsbeispiele:

Im Internet habe ich verschiedene Anlaufstellen gefunden, jedoch hat es nur wenig gute Erklärungen wie denn nun BEM funktioniert. Auf CodePen.io bin ich danach auf einen Beitrag von Jerry Jones gestossen. Dieser visualisiert die BEM Syntax und es hat mir gezeigt, wie das nun in der Praxis aussehen kann. Ausserdem hat er einen Blog, auf dem er einen Beitrag zum Thema BEM geschrieben hat. In diesem Beitrag geht er noch einmal auf alle Aspekte der BEM Syntax ein und erklärt noch weitere Beispiele, die man im Pen nicht sieht.

https://codepen.io/jeryj/full/YWwoqd

http://jeremyjon.es/code/b-is-for-block-an-intro-to-the-bem-naming-convention/

Hier noch ein einfaches Beispiel der Schreibweise:

• .button
• .button—with-icon
• .card_button