CSS BEM - Ein Weg zum Style

08. April 2019 20:00 Uhr

CSS BEM 💥, also CSS Block Element Modifier sind eine Art sich das Ganze "Ich muss meinen CSS Classes einen sinnigen Namen geben, damit das jeder versteht." zu ersparen. Zudem kann man einfache und viel wichtiger wiederverwendbare Komponenten für Websites erstellen.

Aber was heißt das jetzt genau? 🤔

CSS BEM Teilt einen Block einer Website z.B. eine Navigation in verschienene Elemente ein. Als Beispiel die Blog Kachel von meiner Website:

CSS BEM Aufbau

Sehen man sich den Aufbau an, kann man direkt sehen was der Block, das Element und der Modifier ist. Am besten sieht man das an dem Button. Hier besteht die vergebene Class, "blog--btn-primary" aus den beschriebenen drei Teilen.

Aber was habe ich davon? 🤔

Meiner Erfahrung nach, ist CSS BEM eine sehr einfache Methode Komponenten so zu stylen, dass man diese auch für später Projekte wiederverwenden kann. Denn man kann sich unter dem Classes etwas vorstellen, also eher als unter der Class "col-md-4 mb-3 mb-md-0 mt-3 mt-md-5" wie sie bei Bootstrap oft auftreten.

Trotzdem finde ich CSS Utility Classes nicht schlecht und ich verwende es auch sehr gerne. Man muss nur den initialen Aufwand abschätzen, ob man verschiedenste CSS Attribute im vorhinein festlegt und dann bei Bedarf erweitert, wie es bei CSS Utility Classes der Fall ist oder ob man je nach Komponente die Styles schreibt.

Also auch wenn es ein sehr ernüchterndes Fazit, finde ich beide Systeme sehr gut und je nach Tagesform wird eins von beiden verwendet. 🙃

Und damit Ende. 👋🏻