BEM

Block Element Modifier

aus dem Videokurs von E&F

Klassen mit direkter Gestaltung

-> haben eine direkte Auswirkung auf in Contao verwendete Container: .mod_article, .ce_text
-> die grundlegende Gestaltung kommt vom Theme direkt (z.B. padding, …)

Klassen mit indirekter Gestaltung

-> müssen erst hinzugefügt werden
-> die meisten Klassen sind im Ordner /components definiert
-> Vorteile:

  • es müssen nur wenige Klassen definiert werden
  • Klassen sind wiederverwendbar
  • mehr Flexibilität

getbem.com

  • einfache Klassen: .classname oder.class-name -> z.B. .nav
  • Varianten: .classname .classname--variant -> z.B. .nav--main oder .nav--mobile
  • Statusänderung: .classname .classname--status -> z.B. nav nav--mobile--active
  • Kindelemente: .classname__cildname -> z.B. .nav_toggler--button oder .hero--text