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:
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.
Mit CSS Utility Classes kann man zwar arbeiten, doch die Übersichtlichkeit vom Code lässt dann zu wünschen übrig. Zudem stehe ich darauf aufgeräumten Code zu haben, auch wenn das keinen Endnutzer interessiert. Also ich persönlich nutze lieber BEM als Utility Classes und für Anfänger ist es zunächst auch der "way to go" solange man sich nicht mit Frameworks wie Bootstrap, etc. auskennt.
Und damit Ende. 👋🏻