Jens Grochtdreis Selbstständig

Mit der richtigen gedanklichen Herangehensweise schaffen Sie es, Ihren Frontend-Code wartbar zu machen und zu halten. Dafür benötigen Sie Wissen über die Grundlagen von CSS und Willen zu semantisch genutztem HTML.

In allen Programmiersprachen gibt es Diskussionen darüber, wie man seine Applikation möglichst effizient und gut wartbar entwickelt. Die Diskussionsergebnisse fließen in Entwicklungsparadigmen wie MVC (Model View Controller) oder in Benennungsrichtlinien ein. Folgt man solchen Standards, ist es leichter, Code von anderen zu verstehen und zu übernehmen.

Auch in der Frontend-Entwicklung sind solche Standards entstanden. Allerdings werden sie kaum beachtet. Sie haben leider nie die normative Kraft entfaltet, die ihnen zustehen würde, denn schließlich arbeiten viele unterschiedliche Entwicklertypen mit Frontend-Code. Insbesondere diejenigen, die wenig Kenntnisse und noch weniger Motivation für guten Frontend-Code haben, würden von guten und verständlichen Standards profitieren.

Vor der hilfreichen Benennungsrichtlinie steht aber der richtige Blick auf den Frontend-Code. Dabei müssen wir immer bedenken, dass wir mit HTML und CSS Designs umsetzen, also primär eine Verbindung zur Optik haben, nicht aber zur Programmierung.

Eine Seite besteht aus vielen LEGO-Steinen

Eine Webseite setzt sich aus vielen unterschiedlichen Einzelteilen zusammen: Es gibt einen Header, meist einen Footer und einen mehr oder minder stark unterteilten Inhaltsbereich. Im Inhaltsbereich können sich eine Fotogalerie, Teaser, ein großer Fließtext und vieles andere mehr befinden. Alle diese Bestandteile können und sollten für sich selbst betrachtet werden.

Eine Webseite ist dann eine Zusammenstellung aus vielen Einzelteilen. Meist werden sie aus einem CMS gespeist. Die Analogie zu LEGO liegt auf der Hand. Auch bei LEGO werden Objekte aus unterschiedlich großen Einzelteilen zusammengesetzt.

Im Grunde entwickeln wir keine Seiten, sondern „Systeme“. Die Einzelteile dieser Systeme bezeichne ich als „Module“. Mittlerweile wird auch gerne der Begriff „Patterns“ benutzt. Die Module sind prinzipiell unabhängig voneinander, jedes ist ein eigenes kleines Universum. Gängige Module sind beispielsweise:

  • Navigationen
  • Linklisten in Seitenleisten oder im Footer
  • Teaserboxen – mit oder ohne Bild
  • Slider/Karussell
  • in einem Akkordeon organisierte Inhalte
  • in einem Tabinterface organisierte Inhalte
  • eine eingebettete Landkarte
Abb 1: Einzelne Module der Startseite der ZEIT markiert

Abb 1: Einzelne Module der Startseite der ZEIT markiert

Abbildung 1 repräsentiert eine nicht mehr aktuelle Version von ZEIT.de. Sie zeigt die modulare Zusammensetzung der Seite. Mitte 2017 sieht die aktuelle Version von ZEIT ONLINE aus wie in Abbildung 2.

Abb. 2: ZEIT ONLINE Mitte 2017 – einzelne Module markiert

Abb. 2: ZEIT ONLINE Mitte 2017 – einzelne Module markiert

Dave Rupert hat in seinem Screenshot des Microsoft-Designs die gleichartigen Module markiert (Abb. 3). Dabei sollte auffallen, dass das Modul „Linkliste“ durchaus unterschiedlich aussieht. Optische Abweichungen sind also kein Grund, ein neues Modul zu erschaffen. Man sorgt stattdessen dafür, dass ein Standard erstellt wird. Und von diesem gibt es mittels zusätzlicher Klassen die notwendigen optischen Abweichungen.

Abb 3: Der Aufbau der 2012 redesignten Seite von Microsoft (Quelle: [1])

Abb 3: Der Aufbau der 2012 redesignten Seite von Microsoft

Erst der Sinn, dann die Optik

Vergessen Sie bitte nie, dass CSS und JavaScript nur die Erweiterungen für die gute Basis, das semantische HTML sind. Bevor Sie also anfangen, die Gestaltung mit CSS umzusetzen, sollten Sie zuerst sinnvolles HTML erzeugen.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin Spezial Vol. 14: WordPress - "WordPress"

Alle Infos zum Heft
579819342Module im Web: Eine Seite besteht aus vielen Teilen
X
- Gib Deinen Standort ein -
- or -