Klassenbezeichnung / BEM

Für ein möglichst veränderbares Design versuchen wir allen Elementen CSS-Klassen zuzuordnen.

Die Klassen-Bezeichnung beginnt mit einem Kürzel: für allgemeine Vorlagen von dieser Seite hier mit sw- und für spezielle Templates der entsprechenden Seite angepasst mit zwei oder drei Zeichen, z.B: hd- für hoteldemo.seitwerk.net.

Die Klasse für eine Section beginnt mit sw-section- , danach folgt eine eindeutige Betitelung wie content-image. Daraus wird der Prefix sw-content-image für alle Elemente innerhalb der Section. Diese werden nach der „BEM Naming Convention“ benannt. Jedes Element wird mit zwei Unterstrichen vom Prefix getrennt, wie hier zu sehen:

  • Section.sw-section-content-image
  • Container.sw-content-image__container
  • Block.sw-content-image__block
  • Überschrift.sw-content-image__heading
  • Text.sw-content-image__text
  • Button.sw-content-image__button
  • ...

Will man Elementen allgemeine bzw. wiederkehrende Eigenschaften zuordnen, wird mit zwei Bindestrichen getrennt:

  • Roter Button.sw-button--red
  • Dunkler Hintergrund.sw-bg-color--dark
  • Weißer Text innerhalb der
    oben genannten Section    .sw-content-image__text--white