CSS - Alles in eine Datei oder doch nicht?

[afr0kalypse]

Hi zusammen.
ich überlege gerade ob es sinnvoller ist bei großen Projekten (CSS mit > 20.000 Zeilen) Stylesheets sukzessive nachzuladen.

Aktuell sieht man es ja immer wieder, dass generierte CSS Dateien minimiert und komprimiert ausgeliefert werden. Meist in Form einer style.min.css mit 1 Zeile.
Dort steht dann der komplette Stylesheet für das gesamte Webprojekt drin.

Jetzt bin ich aber als Besucher gerade auf der Startseite und die benötigt vielleicht nur 50 Zeilen Stylesheets anstatt 20.000.

Der Vorteil wäre, dass man kleinere Ressourcen lädt. Der Nachteil ist, dass man beim Surfen im Webprojekt Ressourcen nachladen muss und ggf mehrere Requests hat (bis dann alles gecached ist)

Wie sollte man hier am Besten vorgehen?
Und kennt jemand Möglichkeiten der sukzessiven / asynchronen Variante?

 

[Myhar]

Wie groß ist denn das komprimierte CSS mit seinen 20k Zeilen? Bedenke, dass es sowieso gecached wird, der User diese Datenmenge nur einmal runterladen muss. Für den Browser macht es keinen Unterschied.

 

[afr0kalypse]

Bei einem initialen Laden kann man von ~400kb unkomprimiert zu ~250kb komprimiert ausgehen.
Bei einem sukzessiven Nachladen der Stylesheets könnte man von einem Unterschied beim initialen Laden von ~400kb zu ~40kb sprechen. Nach dem Cachen ist das natürlich egal.

Ist dieser Nachlade-Ansatz nicht genau das, was bei diesem tollen "above the fold" Kram gemacht werden sollte?

 

[noltehans]

Bei einem initialen Laden kann man von ~400kb unkomprimiert zu ~250kb komprimiert ausgehen.

Und wenn du es dann noch mit GZIP packt's, kommst du auf cirka 50kb.

 

[lachender_engel]

Für thematisch getrennte (Unter-)Seiten trenne ich auch die CSS. Zum Beispiel Content-Seite, Blog-Seite und Shop. Es kann ja sien, das sjemand zwar den Blog lie0t aber den Shop nicht besucht. Dann muss das CSS auch nicht geladen sien.
Dazu gibt es dann noch ein allgemeines CSS - in dem alle Informationen zum Header, Body und Footer stehen. Diese lade ich immer.
Den Aufwand betreibe ich dann, wenn sich die Bereiche im CSS deutlich trennen lassen und, wenn ein CSS merklich groß wird. Bei CSS-Dateien bis zu 40-50 kB mache ich alles in einem und minify sie dann vor dem "Go".

 

[skiron]

Ich denke das ist vom Projekt abhängig welches Vorgehen optimal ist. Benutze ich viele Klassen würde ich Klassen in einer CSS sammeln. Gleiches gilt für Querys etc.
CSS zu laden auch wenn es nicht gebraucht wird, macht keinen Sinn deshalb ist die Methode von lachender_engel auch ein Gedanke wert. Ein paar wenige Codezeilen deswegen aber auszulagern finde ich auch übertrieben.
Ich mach das immer ganz nach Gefühl wobei ich aber an einer Struktur festhalte um den Überblick nicht zu verlieren. Denn wichtiger als evtl Ladezeiten (hallo? wir haben 2015 und LTE, Gigabit-Netzwerke und 200k Mbit !!! wtf...?) ist die Bearbeitbarkeit des Projekts auch wenn die letzte Änderung schon Monate her ist.

 

[lachender_engel]

Denn wichtiger als evtl Ladezeiten (hallo? wir haben 2015 und LTE, Gigabit-Netzwerke und 200k Mbit !!! wtf...?) ist die Bearbeitbarkeit des Projekts auch wenn die letzte Änderung schon Monate her ist.

Hierzu ein Denkanstoß: Ja, es gibt LTE und Gigabit-Netzwerke. Dennoch zeigt die aktuelle Statisitk, dass der Großteil der Internetbesucher in Deutschland mit maximal 10 MBit, älteren Betriebssystemen und älteren Browsern im Internseet sind. Zudem ist LTE nicht weltweit ausgebaut und auch in Großstätten sind viele "nur" mit UMTS unterwegs.
Des Weiteren - und das finde ich wichtig zu bedenken - muss der Brwoser die CSS-Datei verarbeiten. Und das ist gerade auf mobilen Endgeräten immer noch eine Herausforderung, je größer die Datei ist. Denn neben sehr begrenztem Speicher im Gerät ist auch der wesentlich langsamere Prozessor (im Vergleich zu einem Desktop/Notebook) ausschlaggebend.
Daher: Eine zu große CSS hat auch Auswirkungen die über "Übersichtlichkeit" und "Pflegbarkeit des Projektes" hinausgeht. Denn ICH entwickle eine Seite für den Besucher und nicht so, dass ich es am einfachsten habe...

 

[patrick_l]

Eine zu große CSS hat auch Auswirkungen die über "Übersichtlichkeit" und "Pflegbarkeit des Projektes" hinausgeht.

Dann solltest du dich mal mit DRY (Don't repeat yourself) und OOCSS vertraut machen. Dir vor allem den (Skalierbare und Modulare Architektur für CSS) Style-Guide nahe lege. Vor allem mit CSS Präprozessor wie LESS, Sass und/oder Stylus bekommt man mehr Struktur und eine bessere Übersicht in eigene Projekte (jeglicher Größenordnung!).

- OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
- SMACSS » Scalable and Modular Architecture for CSS
- Matt Stauffer - Organizing CSS with OOCSS, SMACSS, and BEM
- Midwest 2014: Mina Markham - SMACSS Your Sass Up!

Denn ICH entwickle eine Seite für den Besucher und nicht so, dass ich es am einfachsten habe...

Für den Besucher zählt nur eines, und zwar was und wie schnell etwas vorne rauskommt. Warum sich also die Arbeit unnötig schwer machen, die Wartbar und Lesbarkeit große Projekte erschweren, und auf Präprozessoren verzichten? Ich arbeite nur noch mit Sass. Selbst fürs Markup einen Präprozessor (Jade) verwende.

Mit der auf Node.js basierten Template Engine Jade und dem CSS Präprozessor Sass samt leichtgewichtigen Bourbon Framework man nicht nur schlanken Code auf die Beine stellt, sondern wie weiter oben schon erwähnt, eben auch mehr Übersicht und Struktur in eigene Projekte rein bringt. Ich sehe da also erst einmal nur Vorteile und möchte Präprozessoren nicht mehr missen.

Bei solch großen Projekten sollte man meiner Meinung nach so oder so gleich darauf achten, "DRYer" Code zu schreiben. Halt schauen, ob, wo und wie man (unnötige) Anweisungen einsparen kann. Wenn ich entscheide muss, ein oder mehre HTTP-Request, ersteres vorziehe. Wobei man nicht vergessen darf, das auch in CSS jede eingebundene Grafik einen HTTP-Request verursacht. Daher wenn möglich mit sinnvoll angelegten Sprite-Images (Sprite-Maps) arbeiten. Genau das geht auch wieder ratzfatz mit Sass und Compass (via Ruby). Ganz ohne lästiges Aus und Neuberechnen.

Schon etwas älter, trotzdem möchte ich an dieser Stelle vor allem auf den Vortrag von André Laugks beim Multimediatreff (MMT 29 - 2012) in Köln verlinken. Dort geht es unter anderem um solche Projekte, sprich Stylesheets mit 20.000 Zeilen und mehr. Auch wenn ich nicht alles so sehe (primär der Sass Syntax wegen), weiterempfehlen kann.

- MMT29: André Laugks » Sass, SCSS und Compass - Stylesheets im Griff!

Liebe Grüße, Patrick

 

[PsychoViper]

Hey....

Ich mache es immer so:
Globale.css für alle meine .html (Hauptsächlich für Anzeigen von Modal etc.p.p.)
Index - UI als eigene Datei
Global - Effekte.css alle getrennt pro Html.