Spaghetti-Quelltext ('Spaghetti-Code')

Eine Abstraktion des Designs von der Struktur der Website bringt entscheidende Vorteile. Je höher diese ist, desto unabhängiger (getrennter) sind diese voneinander. Keine solche Trennung wird als so genannter Spaghetti-Code oder Tag-Suppe (Tag von Html-Tag) bezeichnet.

Es ist heute problemlos möglich Farben, Typografie, Bilder des Designs und weitgehend sogar das Layout einer Website in separaten CSS-Dateien (CSS = Cascading Style Sheet) zu speichern.

Dies reduziert den Aufwand für die Pflege der Website massiv. Mittels CSS lässt sich etwa das Corporate Design zentral steuern, ohne dass dazu Entwickler benötigt werden. Dies ist sogar ohne Einschränkungen über grössere oder gar mehrere Websites hinweg möglich.

Die zentrale Speicherung des Designs in CSS Dateien verringert zudem die Grösse der HTML-Seiten massiv, was schnellere Downloadzeiten sowie weniger benötigte Bandbreite und Transfervolumen bewirkt. Werden Seiten schneller geladen, freut dies den Benutzer und verringerter Ressourcenverbrauch reduziert die Kosten.

Weiterhin werden dadurch die Zugänglichkeit der Website und die Suchmaschinenfreundlichkeit erhöht.

Während die Struktur und der Inhalt bei professionellen Websites mit Management Systemen normalerweise aus Datenbanken ausgelesen werden, sofern diese nicht bereits im Server Cache vorhanden sind, können die wenigen benötigten CSS-Dateien ohne Nachteile im Dateisystem auf dem Web-Server gespeichert werden, wodurch die Anfragen sehr rasch beantwortet werden können. Hat der Browser die CSS-Dateien geladen, müssen diese bei weiteren Seitenanfragen nicht erneut herunterladen werden. Bei Spaghetti-Code entfällt dieser entscheidende Vorteil, da Struktur, Inhalt und Design vermischt sind.
Professionelle, aktuelle Content Management Systeme erlauben das Editieren dieser CSS-Dateien.

Die höchstmögliche Trennung des Designs bringt zudem für Designer und Entwickler mehr Unabhängigkeit.
So kann sich der Entwickler auf die Entwicklung einer benutzerfreundlichen, gut zugänglichen Website konzentrieren und braucht sich nicht mit dem Design herumzuschlagen.
Parallel dazu kann der Designer die Grafiken und die Definitionen für Farben und Typografie vorbereiten, falls diese noch nicht bestehen.

CSS-Dateien lassen sich wie (X)HTML-Dateien validieren, was bei der Fehleranalyse von grossem Nutzen ist. Wir empfehlen in jedem Fall CSS-Dateien zu überprüfen, bevor diese publiziert werden. http://jigsaw.w3.org/css-validator/.
Professionelle Content Management Systeme haben diese Überprüfungsfunktion z.T. integriert, was in jedem Fall sinnvoll ist.

Tools:
seven49.net - Qualidierungs- und Validierungstool (kostenlos)

Weiterführende Informationen:
http://www.style-sheets.de/guide/grundlagen/warum_css
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/