CSS Frage, eigenes Wordpress Theme und CSS

[Domi83]

Moin Leute, ich habe da mal eine kleine Frage

Ich habe ein eigenes Theme für einen WordPress Blog aufgebaut. Soweit funktioniert auch alles. Nun wollte ich aber die Inhalte der CSS ein wenig aufteilen, damit es nicht eine mege große CSS Datei ist und ein wenig Übersicht da rein kommt. Also habe ich wie z.B. bei Joomla auch, mit der import Funktion gearbeitet. Auf der Startseite vom Blog funktioniert das auch, aber sobald ich auf einer Unterseite bin, funktioniert der Import nicht mehr

Kennt jemand dieses Phänomen und kann mir erklären, woran das liegen könnte? Unter Joomla z.B. funktioniert diese Methode und bei selbst gebauten Projekten auch, aber im WordPress funktioniert es nicht

Gruß, Domi

 

[Cool Master]

Mein Tipp:

Eine CSS Datei und gut ist, evtl. zwei wenn es Sinn ergibt etwas auszulagern weil man öffters daran arbeiten muss (warum auch immer). Generell gilt aber je mehr CSS Datein geladen werden müssen desto länger benötigt der Seitenaufbau weil dank TCP für jede CSS Datei ein ACK raus geschickt werden muss.

Mit halbwegs gutem Layout dürftest du auch nicht wirklich über 1-2 MB kommen.

 

[Speedy.]

Und 1 - 2 MB sind schon hoch gegriffen für einen Blog, dann musst du verdammt viele Styles haben. Generell ist aber wirklich von der Import-Methode abzuraten, eben aufgrund der längeren Ladezeit.
Wenn du das Stylesheet über den WordPress-Header aufrufst, sollte es eigentlich klappen. Schonmal den Cache des Browsers gelöscht?

 

[..Heisenberg..]

Also wie Cool Master schon sagte, eine CSS ist gerade was die Ladezeit der Webseite angeht, fast Pflicht

 

[Domi83]

Huch.. Okay, dass mit der Ladezeit war mir noch gar nicht bewusst. Dann muss die Datei halt diese eine style.css schöner und übersichtlicher gemacht werden und fertig ist der Käse.

Danke für die kleine Information. Und ne, 1 - 2MB habe ich nicht. Es ging mir eigentlich eher um die optische Trennung... aber wenn es wegen der Performance ungünstig ist, muss halt die Optik halt ein wenig zurück stecken

Gruß, Domi

 

[Cool Master]

Ich gehe immer so vor in Projekten:

 /* ********* Header ************* */

Mein CSS für den Header-Berreich

/* ******* Header Ende ********** */

/* ********* BOdy ************* */

Mein CSS für den Body-Berreich

/* ******* Body Ende ********** */

/* ********* Footer ************* */

Mein CSS für den Footer-Berreich

/* ******* Footer Ende ********** */

Was ich noch gerne seperat schreibe (idR nach dem CSS-Reset) ist das Menü bzw. Navigation da ich meine Navigation in Pure-CSS schreibe und nicht auf JS zurückgreife.

 

[.olli]

Für die Übersichtlichkeit zwar ganz nett, bläht aber die CSS-Datei nur unnötig auf. Mein Tipp: Die Development-Version schön kommentieren und strukturieren, vor dem Produktiveinsatz dann aber reduzieren und (vor)komprimieren. Für Wordpress gibt es sogar entsprechende Plugins.

 

[ice-breaker]

Witergehend zu dem was .olli vorgeschlagen hat, könnte man noch auf LESS oder SASS setzen. Beim Entwickeln schön alles in einzelnen Dateien, gleichzeitig so tolle Dinge wie Variablen, und Mixins nutzen um die Struktur und Wartbarkeit u verbessern und am Schluss eine einzige CSS-Datei erzeugen lassen.

 

[Daaron]

Und 1 - 2 MB sind schon hoch gegriffen für einen Blog, dann musst du verdammt viele Styles haben.

1MB ist doch quasi unmöglich. Ich guck mir hier grad das elend lange Stylesheet einer Magento-Installation an, in dem noch ein Haufen Altlasten sind, die ich noch nicht beräumt habe: 86kByte. Andere Seiten, mit halbwegs aufgeräumtem Code und (im Gegensatz zu dem Shop) auch noch großflächigem Einsatz von Media Queries, liegen bei ~60kByte.

Ich gehe immer so vor in Projekten:
...

Kann man machen, beißt einem aber in den Arsch, wenn man dann mit Media Queries arbeitet. Dann überlegst du plötzlich, wie du DIE nun wieder in diese Struktur einbeziehst...

Für die Übersichtlichkeit zwar ganz nett, bläht aber die CSS-Datei nur unnötig auf.

Spielt quasi keine Rolle. YUI-Compressoren sind zwar nett, aber für CSS eher unnötig. Bei JS nutz ich das Ding auch, da macht es einen ziemlich großen Unterschied. Bei CSS? Wäh...
Ein gut eingestellter Server sendet die Dokumente eh komprimiert raus, für eine 60kByte großen CSS wurden effektiv 14kByte übertragen. Nach Zip sparst du dir mit deinem YUI-Kompressor wenns Hoch kommt 1kByte. Da kannst du an anderen Ecken mehr rausreißen, z.B. mit Iconfonts, CSS Sprites, Base64-Grafiken,...

 

[Cool Master]

1MB ist doch quasi unmöglich.

Ja stimmt schon war auch ein wenig übertrieben

Kann man machen, beißt einem aber in den Arsch, wenn man dann mit Media Queries arbeitet. Dann überlegst du plötzlich, wie du DIE nun wieder in diese Struktur einbeziehst...

Deswegen sagte ich ja 1-2 Styles wenn es einen Vorteil bietet. Gerade z.B. zum Ausdrucken würde ich eine print.css machen und nicht alles in eine rein hauen.

 

[Daaron]

Jede Datei mehr ist ein lahmarschiger TCP-Request mehr, wie schon gesagt.

Die beste Lösung ist, für das jeweilige CMS ein hübsches Plugin zu verwenden, dass CSS (und JS) automatisch zusammenfast. Contao kann sowas z.B. von Haus aus.