Riesenstylesheet oder mehrere kleine?
0 0 0 
Felix Riesterer
0 0 0 
Kai345
0
Riesenstylesheet oder mehrere kleine?
Hallo,
es geht um eine kleine Prinzipienfrage: Lieber ein gigantisches CSS (einige dutzend kb groß, um übersichtlich zu sein viele hundert Zeilen lang) oder lieber mehrere kleine CSS, die dann im Stil von
<link rel="stylesheet" type="text/css" href="/shared/css/design.css" title="bla" />
<link rel="stylesheet" type="text/css" href="/shared/css/headerdesign.css" title="bla" />
...
Die zweite Methode ist ja prinzipiell deutlich unperfomanter, weil für jede einzelne Seite gleich mehrere weitere HTTP-Requests kommen. Dafür wäre es für den Webdesigner viel übersichtlicher. Es bläht allerdings auch wieder den Header des (X)HTML-Dokumentes auf. Was man dadurch kompensieren könnte, dass man im CSS selbst nachlädt. Was möglicherweise die Seitenanzeige verzögert, weil die Requests zu den "verschachtelten" CSS erst dann geschehen können, wenn das erste geladen ist.
Wie seht ihr das?
Sven
--
ich hatte mal meterlange signs, die sind alle weg
ich hatte mal meterlange signs, die sind alle weg
-
Hey,
cat dev/*.css > ./all.css
?!
Tschö
-
Moin asdf,
cat dev/*.css > ./all.css
?!hehe, auch eine nette Idee. An sowas hab ich auch gedacht. Notlösung quasi.
Grüße
-
-
Hallo,
es geht um eine kleine Prinzipienfrage: Lieber ein gigantisches CSS (einige dutzend kb groß, um übersichtlich zu sein viele hundert Zeilen lang)
ich würde diese Variante bevorzugen. Ist es nicht so, dass (sofern nicht vom jeweiligen User anders konfiguriert) das Stylesheet normalerweise ge'cache't wird? Dann muss der 'Brocken' nur einmal beim ersten Aufruf einer Seite übertragen werden, während er bei allen weiteren Seiten der Site bereits im Cache liegt. Das Stylesheet verursacht also somit nur einmal einen Request, was imho die performanteste Variante darstellt.
Für das Bearbeiten kann man das Stylesheet ja durchaus in mehrere Dateien splitten, wobei man natürlich auf die korrekte Reihenfolge (Kaskade & Spezifität) achten muss. Alternativ bietet sich auch die Verwendung eines Editors an, der Sprungmarken innerhalb einer Datei unterstützt.
BTW: Könnte jemand mal bitte so nett sein, und mir (Win)"Dummy" die Antwort von asdf "übersetzen" - Danke!
Gruß Gunther
-
Hallo,
BTW: Könnte jemand mal bitte so nett sein, und mir (Win)"Dummy" die Antwort von asdf "übersetzen" - Danke!
cat dev/*.css > ./all.css
cat ist ein Befehl, der den Inhalt von Dateien ausgibt (vergleichbar mit "type" für Windows und DOS). Mit "cat test.css" würde der Inhalt von test.css angezeigt werden, mit "cat dev/*.css" wird der Inhalt aller CSS-Dateien im angegebenen Verzeichnis ausgegeben. über die Pipe (>) wird dann die ausgabe in die Datei all.css umgeleitet.
Ich bevorzuge übrigens mehrere Dateien. Zwar nicht unbedingt viel, aber eine mit einem Basisstylesheet die alle halbwegs CSS-fähigen Browser, Handhelds usw. kriegen und eine mit spezielleren Styles für die wirklich CSS-fähigen Browser. Evtl. noch ein zusätzliches print-Stylesheet.
Jonathan
-
Grütze .. äh ... Grüße Euch
BTW: Könnte jemand mal bitte so nett sein, und mir (Win)"Dummy" die Antwort von asdf "übersetzen" - Danke!
cat dev/*.css > ./all.css
füge alle Dateien mit der Endung .css im Verzeichnis dev/ im aktuellen Verzeichnis in eine Datei all.css zusammen.
Cü
Kai, trotz windows auch einen cat-befehl habend-
Ah, jetzt wird's auch mir verständlich!
Vielen Dank für die Erklärungen!
Gruß
Gunther
-
-
-
Lieber Sven,
<link rel="stylesheet" type="text/css" href="/shared/css/design.css" title="bla" />
<link rel="stylesheet" type="text/css" href="/shared/css/headerdesign.css" title="bla" />warum nicht über @import? Was die Performanz angeht, so sehe ich dort auch einen Nachteil, jedoch hat man bei solchen Teil-Stylesheets eher die Möglichkeit, ein Baukastensystem zu entwickeln. Jedenfalls mache ich das so bei meinem Quiz-Script, welches für jede Quiz-Art eine eigene CSS-Datei lädt.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Moin!
es geht um eine kleine Prinzipienfrage: Lieber ein gigantisches CSS (einige dutzend kb groß, um übersichtlich zu sein viele hundert Zeilen lang) oder lieber mehrere kleine CSS, die dann im Stil von
Eindeutige Aussage von mir: Alles in eine Datei. Ich arbeite gerade an einem Design, dessen CSS-Datei sich der 40KB-Grenze (mit knapp 2000 Zeilen) nähert.
Es dauert deutlich länger für den User, wenn der Browser sich zwei oder mehr Dateien zusammensammeln muß, als wenn alles direkt in einer großen Datei geladen wird. Bedenke auch, dass pro Datei nochmal etwa 1 KB an HTTP-Headerdaten zusätzlich anfallen. Die 40 KB aufzuteilen z.B. in 10 Dateien würde bedeuten, dass nicht 40+1 KB geladen werden, sondern 40+10 KB. Plus der Wartezeit bei HTTP 1.1, denn ein Browser macht nicht beliebig viele Requests parallel, sondern nutzt eine Maximalzahl pro Server, mit denen er dann nacheinander Requests abarbeitet.
Den Überblick in so einer Riesendaten behält man übrigens mit der Firebug-Extension zum Firefox. Ich frag mich, wie man früher ohne dieses Tool arbeiten konnte... ;)
- Sven Rautenberg
--
"Love your nation - respect the others."-
Moin Sven!
Ich arbeite gerade an einem Design, dessen CSS-Datei sich der 40KB-Grenze (mit knapp 2000 Zeilen) nähert.
Hast du mal eine Empfehlung, bzw. kannst mal verraten, wie du so eine Datei strukturierst? Setzt du alle Eigenschaften eines bestimmten Elements auf einmal, oder splittest du nach Eigenschaften (position, background, font, etc.)?
Den Überblick in so einer Riesendaten behält man übrigens mit der Firebug-Extension zum Firefox. Ich frag mich, wie man früher ohne dieses Tool arbeiten konnte... ;)
Da sagst du was! Ist auch bei kleineren Dateien und vor allem bei der "Fehlersuche" extremst hilfreich - wer ohne arbeitet, macht sich das Leben unnötig schwer!
Gruß Gunther
-
Grütze .. äh ... Grüße Euch
Ich arbeite gerade an einem Design, dessen CSS-Datei sich der 40KB-Grenze (mit knapp 2000 Zeilen) nähert.
Hast du mal eine Empfehlung, bzw. kannst mal verraten, wie du so eine Datei strukturierst? Setzt du alle Eigenschaften eines bestimmten Elements auf einmal, oder splittest du nach Eigenschaften (position, background, font, etc.)?*Das* interessiert mich auch. Ich habe hier schon bei meinen Layouts mit Dateien von 5-8k hoffnungslos den Überblick verloren :( Ist wohl das Alter ;)
Cü
Kai -
Moin!
Ich arbeite gerade an einem Design, dessen CSS-Datei sich der 40KB-Grenze (mit knapp 2000 Zeilen) nähert.
Hast du mal eine Empfehlung, bzw. kannst mal verraten, wie du so eine Datei strukturierst? Setzt du alle Eigenschaften eines bestimmten Elements auf einmal, oder splittest du nach Eigenschaften (position, background, font, etc.)?Ich strukturiere thematisch bzw. nach Ort und Art der Information. D.h. ich fange klein an mit den grundsätzlichen Containern für die üblichen Seitenelemente (Navi, Content etc.), und weitere Styles zu diesen Themen werden dann in der Nähe dieser Zeilen platziert.
Das sieht man in diesem fortgeschrittenen Stadium allerdings nicht mehr so unbedingt. Die Navi ist zwar weiterhin oben in der Datei gestylt, aber umfasst nicht so wahnsinnig viele Zeilen, als dass das auffällt. Der Content hingegen läßt sich ebenfalls nochmal thematisch unterteilen. So gibts z.B. diverse Tabellen, deren Styling-Definition ich auf einem Haufen halte.
Und ansonsten ergibt es sich vermutlich dadurch mehr oder weniger von selbst, dass Dinge, die optisch beieinander liegen, auch im CSS dicht zusammen platziert sind, weil ich im Firebug die Zeilennummer bestehender Definitionen sehe, dorthin scrolle - und Ergänzungen dann logischerweise dort in der Nähe unterbringe. :)
- Sven Rautenberg
-
-