Ein Stylesheet besser(schneller) als mehrere?

[Chronos]

Hallo,

meine Frage ist, was wohl "best practice" in Sachen Stylesheets ist.
In habe in meinem kleinen (PHP-)Projekt mehrere Seiten, die ich dynamisch generieren lasse,
jetzt braucht aber nicht jede Seite alle CSS-Klassen etc.
Da jede Seite eine "reset.css" braucht und dasselbe Menü sowie Grundeigenschaften hat, habe ich in einer "one.css"
zunächst den Inhalt der reset und danach alle anderen Eigenschaften eingefügt. Bringt das an sich schon einen Geschwindigkeitsvorteil? Es ist ja nur noch eine Datei zu laden. Jetzt kann aber auch eine Seite Eigenschaften haben, die die anderen nie brauchen werden, sollte man diese Eigenschaften in eine extra CSS auslagern? Diese braucht aber natürlich auch reset und basic, so das in dem Fall wieder auf one.css und meinetwegen two.css zugegriffen werden muss.

*Zum Inhalt kann ich ich sagen das die Anzahl an Zeilen überschaubar ist, thematisch zusammengehörige Eigenschaften fasse ich so zusammen:

/* Menü
==============================*/

Klassen etc. immer lower-case und getrennt mit "-"

#back-link

Versteht jemand was ich meine und kann mir sagen ob meine Überlegungen grundsätzlich richtig sind?
Mich interessieren auch technische Hintergründe wie das DOM verarbeitet wird etc.

MfG

 

[scbawik]

Irgendwie verstehe ich die Frage nicht richtig aber generell kann man sagen dass eine Datei immer besser ist als mehrere, da nur eine Verbindung aufgebaut werden muss.

Du willst jetzt aber nicht behaupten du bemerkst überhaupt die Ladezeit einer CSS-Datei?

Auch wenn du Eigenschaften in der CSS hast, die die aktuelle Seite nie braucht, musst du bedenken dass sich deine CSS-Datei sowieso im Cache befindet und nicht bei jedem Seitenaufruf neu geladen wird. Daher entsteht insgesamt ein Geschwindigkeitsvorteil, auch wenn die einzelne CSS-Datei sehr groß ist.

PS: Du kannst auch einen CSS Minifier/Compressor verwenden um eine kleinere Dateigröße zu erhalten.

 

[Chronos]

Nein merken tue ich das nicht wirklich - klar. Aber ich möchte in meinem Projekt alles möglichst kompakt und Ladezeiten freundlich gestalten; eben auch shorthand hex codes wie z. B. #000 da es kürzer als "black" ist und ein Zeichen spart. Das sind nur Kleinigkeiten aber in der Masse macht das schon etwas aus. Deswegen interessiert mich sowas. Das mit dem Cache war mir so z. B. nicht bewusst, danke :).

 

[ge_fabian]

Nein merken tue ich das nicht wirklich - klar. Aber ich möchte in meinem Projekt alles möglichst kompakt und Ladezeiten freundlich gestalten; eben auch shorthand hex codes wie z. B. #000 da es kürzer als "black" ist und ein Zeichen spart. Das sind nur Kleinigkeiten aber in der Masse macht das schon etwas aus. Deswegen interessiert mich sowas. Das mit dem Cache war mir so z. B. nicht bewusst, danke :).

naja, wenn alles Compressed wurde, und einmal im Cache ist, lädt die Seite im Nu ;)
Vorrausgesetzt:
- Cache
- schneller Server
- schnelles Internet des Clienten
- compressed Code

Ich versuche auch immer so wenig unnötige Zeichen wie möglich zu verwenden, aber eigentlich, man merkt es kaum ..

 

[Banana_Jones]

Best practice ist eigentlich, alle .css Dateien serverseitig automatisiert zusammenzufassen, zu komprimieren und dann die einzelne Datei auszuliefern.
Das zusammenfassen und komprimieren kann man natürlich auch händisch machen.

 

[ge_fabian]

Best practice ist eigentlich, alle .css Dateien serverseitig automatisiert zusammenzufassen, zu komprimieren und dann die einzelne Datei auszuliefern.
Das zusammenfassen und komprimieren kann man natürlich auch händisch machen.

du meinst, das .css Kürzel komplett zu streichen, und stattdessen eine .php Endung draus zu machen?

 

[scbawik]

Entweder - ODER du generierst nur nach CSS-Änderungen per PHP eine CSS-Datei die alle anderen Dateien enthält. Das ODER ist natürlich noch etwas schneller.

 

[Banana_Jones]

du meinst, das .css Kürzel komplett zu streichen, und stattdessen eine .php Endung draus zu machen?

Nein, durch ein Skript (php/JS) die vorhandenen .css Dateien zu einer einzigen, neuen und komprimierten Datei zusammenzufassen. Ob das jetzt automatisiert bei jeder Änderung passiert oder von Hand angestoßen wird, ist dann die nächste Frage und hängt auch mit der Aktualisierungs-Frequenz zusammen

 

[Sentence]

Schau mal hier:
Make your pages load faster by combining and compressing javascript and css files | rakaz