SEO und Joomla | Artikel und Hilfe

Spaghetti-Code - Was ist das und wie vermeide ich diesen?

Unter dem Begriff Spaghetti-Code werden Formatierungen von Text, Überschriften, Links, usw. bezeichnet, die fest in den HTML-Code geschrieben werden. Da diese Formtierungen aber immer wieder benötigt werden, sollten diese nicht immer wieder wiederholt werden, sondern an einer Stelle hinterlegt werden, so dass alle Elemente, die diese Formatierung benötigen diese automatisch erhalten. Regelfall erkennt man den Spaghetti-Code an dem "style" Parameter inerhalb eines Elements.

Beispiel:

<p style="font-size: 10px;">Ihr Text</p>

Diese Vorgehensweise (die wir vermeiden wollen) erfordert, dass jedes Element einzeln mit den entsprechenen Werten gefüttert werden muss. Im obigen Beispiel wird der Übersichtlichkeit halber nur die Schriftgröße angepasst, aber wenn wir uns nun vorstellen, dass man noch viele weitere Dinge wie Schriftart, Farbe, Linienhöhe, Abstände usw. definieren kann, wird eine ganze Menge Quellcode erzeugt, weil die identischen Formatierungen für jeden Absatz immer wieder hinterlegt werden würden.

Sinnvoll ist es daher die gewünschten Formatierungen in eine CSS (Cascading Style Sheet) auszulagern und mit Hilfe einer Klasse (sofern notwendig) aufzurufen bzw. dem HTML-Element zuzuordnen.

Bezogen auf obiges Beispiel bedeutet es:

HTML-Code

<p>Ihr Text</p>

CSS-Code:

p{
  font-size: 10px;
}

Ergebnis ist, dass jedes <p>-Tag nun automatisch diese Schriftgröße erhält, ohne das es bei jedem <p>-Tag im HTML-Code angegeben werden muss.

Haben Sie nun einen bestimmten Formatierungswunsch, der ebenfalls häufiger verwendet werden soll, aber nicht bei jedem <p>-Tag gezogen werden soll, so lösen Sie dieses am besten mit einer Klasse:

HTML-Code:

<p class="klassenname">Ihr Text</p>

CSS-Code:

.klassenname{
  color: red;
  margin-top:25px;
}

Wenn Sie dieses Vorgehen durchgängig auf Ihrer Webseite nutzen, so sollten Sie keinen "Spaghetti-Code" mehr auf Ihrer Seite haben. (Kein "style" Parameter innerhalb Ihrer Elemente).

Neben dem eigentlichen Grund, den Quellcode nicht unnötig aufzuplustern, hat diese Arbeitsweise auch noch andere Vorteile. Zum einen stellen Sie sicher, dass Ihre Webseite auf allen Seiten und Bereichen auch wirklich einheitlich aussieht (Corporate Design, Seriösität und Vertrauen/Kompetenz vermitteln sollten hier erwähnt sein) und zum anderen können Sie zu einem späteren Zeitpunkt sehr schnell am Layout Änderungen durchführen, die gleich überall wirken und somit sehr viel Nacharbeit und somit ggf. auch Zeit und Geld ersparen.