php-homepage.com

Was ist CSS?

In den Stylesheets (datei.css) werden Regeln für die Gestaltung von HTML Elementen definiert.
CSS ist also keine Programmier- sondern eine reine Formatierungssprache.

Wozu braucht man also CSS, wenn man doch alles inline stylen könnte?
Im Artikel über die drei Möglichkeiten der Einbindung von CSS in HTML
werden die Arten, auf die man CSS einbinden kann, erklärt.

Um die Übersicht zu wahren, möchte ich dort nicht weiter auf die Vor- und Nachteile jeder einzelne Möglichkeit eingehen.

Die älteste und wohl auch "schlampigste" Methode, sind die Inline Styles.

Hier wird jedes HTML Element direkt formatiert:

<div style="color:red";>
...
</div>

Diese Methode wurde und wird von WYSIWYG-Editoren genutzt.
Warum? Na weil es technisch einfacher zu lösen ist,
die im Editor gewählte Formatierung eines Textes oder von Objekten/Bildern,
zu formatieren.
Der große Nachteil besteht hierbei in der unübersichtlichen Vermischung von Inhalt und Design,
was einerseits nachträgliche Anpassung sehr aufwändig macht
und andererseits führen Inline Styles gerne zu Mehrfachauszeichnung/Überschreibungen.

Da hat man diese Grundsätze nach Jahren der Webseitenerstellung und Betreuung verinnerlicht,
kommt Google (Pagespeed) daher und meint:

"Wenn die externen CSS-Ressourcen klein sind, können Sie sie auch inline platzieren, also direkt in das HTML-Dokument einfügen. Wenn kleine CSS-Ressourcen auf diese Weise inline eingefügt werden, kann der Browser mit dem Rendern der Seite fortfahren."

Aber Vorsicht! Google meint mit "inline" hier ewas anderes:

Unter bestimmten Umständen (Seiten mit viel Inhalt, großen Bildschirmen,..)
blockiert das Laden eines eyternen Stylesheets das Rendern der Seite.
Hier könnte man aus Performancegründen das Stylesheet erst nach Ende des body-tags einbinden.

Somit wird die Webseite ohne Verzögerung aufgebaut und die Designinformationen erst später vom Browser interpretiert.
Da aber bei CMS-Templates sämtliche Dateien im head eingebunden werden,...

CSS über externes Stylesheet einbinden

Die klassische Variante, im head-Bereich des HTML Dokumentes wird/werden Stylesheeet(s) eingebunden.
+Saubere Trennung von Inhalt und Design
+eine Designänderung kann schnell und ohne großen Aufwand durchgeführt werden.
-Wie oben erwähnt, kann sich diese Variante leicht negtiv auf die Ladezeit bzw. die Zeit bis zum Rendern der Seite auswirken.
Man muss erwägen, ob man die Einbindung nicht unbedingt nötiger .CSS Dateien ans Ende des Dokumentes auslagert.

Internes Stylesheet

Hier werden CSS Anweisungen direkt im head angegeben:

<head>
<style>
body {
    background-color: #eee;
}
h1 {
    color: green;
}
</style>
</head>

Die gleiche Syntax wie bei einem externen Stylesheet, nur muss dafür nicht extra eine Datei geladen werden.
Der Browser kann die Seite ohne Verzögerung und sofort mit den gewünschten Styleinformationen rendern.

Nur leider ein administrativer Nachteil:
-Die Styleinformationen die auf diese Weise angegeben werden, gelten natürlich nur für das aktuelle HTML Dokument.
Bei Designänderungen eines gesamten Webauftritts erschwert dies die Pfelege je nach Anzahl der Unterseiten beachtlich!

Fazit Grundsätzlich arbeitet man auch oder speziell in Content Managment Systemen mit externen Stylesheets.
Selbst wenn Pagespeed empfiehlt, CSS Regeln "inline" einzufügen, bzw ans Ende des Dokumentes zu legen.