Optimierung der CSS

[marcellino]

Die Qualität der Ausgabe wie auch die Kompatibilität begeistert wahrscheinlich jeden, aber durch die komplexe Stylesheet Struktur und die ausgefeilte Umsetzung leidet die Performance. Ein Speedtest bei websiteoptimization.com zeigt eine css Grösse von 60kb. Damit wird eine Grösse erreicht, welche meiner Meinung nach das Limit überschreitet. Ich fände es toll, wenn da noch etwas Optimierungsarbeit geleistet werden könnte.

[hieblmedia]

Diese Speedtester sind eigentlich noch aus dem ISDN/Modem Zeiten. Es ist natürlich immer gut so wenig wie möglich Traffic zu verursachen. Aber eigentlich ist das heute fast "egal" wenn alles ein wenig mehr ist. 50kb hin oder her...da schaut keiner und die mehrheit hat DSL. Wenn man sieht wieviel Grafiken bei den meisten Seiten geladen werden, da sind die Stylesheets nichts dagegen. Ausserdem sind die Stylesheets auch mit Kommentaren versehen, was die Datei halt einfach größer macht.
Hier leidet die Performance auf keinen Fall.

Die ganzen Vorgaben in den CSS Dateien können natürlich je nach Projekt eingegrenzt werden. Aber um Möglichst viel Beispiele zu zeigen und Qualität zu bieten ist dies nun einfach so. Um die größe zu reduzieren muss man selbst Hand anlegen.

[djesse]

Hallo Marcellino,

es ist wohl klar, dass eine nachvollziehbare Code-Dokumentation durch Kommentare nicht einher geht mit einer minimalen Dateigröße. Für die Verwendung des Frameworks ist eine lückenlose Dokumentation in erster Linie entscheidend. Für den Einsatz in produktiver Umgebung existieren im Internet zahlreiche Tools, um CSS-Dateien und HTML-Quelltexte automatisch optimieren zu lassen. Dabei werden Kommentare entfernt, Kurzschriften verwendet und Doppeldefinitionen entfernt. Dieser Weg steht jedem frei.

Dein Hinweis ist durchaus berechtigt. Ab einer der nächsten YAML-Versionen wird es für den praktischen Einsatz bereits optimierte Fassungen der wichtigsten Dateien geben.

Gruß
Dirk

[gun]

Die Einstellung das eine Optimierung der Dateigröße nicht nötig ist da die Mehrheit DSL hat ist ja wohl reichlich daneben. Ich benutze momentan eine Aircard, davon abgesehen geht es auch ums Prinzip.
Zudem finde ich es absolut lästig, 7 css und 1 html Datei im Editor zu bearbeiten.

[djesse]

Hallo gun,

Die Einstellung das eine Optimierung der Dateigröße nicht nötig ist da die Mehrheit DSL hat ist ja wohl reichlich daneben. Ich benutze momentan eine Aircard, davon abgesehen geht es auch ums Prinzip.

Dir ist schon bewusst, dass Du auf einen Beitrag aus 2006 geantwortet hast? Das Framework hat sich seither deutlich weiterentwickelt, wobei unabhängig davon meine Hinweise aus meinem letzten Postion unverändert gelten.

Zudem finde ich es absolut lästig, 7 css und 1 html Datei im Editor zu bearbeiten.

Ich wüsste nicht, wie Du auf 7 CSS-Dateien kommst. Als Anwender arbeitet man in der basemod.css, content.css und ggf. einer print.css, also max. 3 Dateien. Sollte der IE sehr zicken, muss man noch 1..2 Regeln in ein patch-Stylesheet schreiben. Wie Du Deine eigenen CSS-Dateien verwaltest, obliegt Dir selbst. Du kannst die ersten drei genannten auch gern in eine CSS-Datei zusammenlegen.

Gruß
Dirk

[gun]

Hallo Dirk,

ist mir schon klar, dass der Beitrag von 2006 ist, kam sogar eine Warnmeldung vom System. Aber die Aussage von Hr. Hiebl wollte ich nicht unkommentiert stehen lassen.

css: Spaltenanordnung 2,1,3, shiny_buttons, background_colums, content, patches...

Beim Zusammenfassen (optimieren) kommen dann schnell 7 und mehr Dateien zusammen. Dateien die im Betrieb alle einzeln heruntergeladen werden, die zum Teil aus mehr Copyrightinfos bestehen als aus css-code.

Letztlich ist für mich auch die Überschaubarkeit wichtig, und da komme ich dann schon ins grübeln, wenn ich mir unbekannte moz-Anweisungen mühsam zusammen suche (habe nicht alle gefunden ;-), diese auf mein Dokument angewendet werden und ich die Datei nicht mehr finde wo die drin stehen...

Mal sehen wie ich damit zurecht komme, als Informationsquelle und zur Erstellung von Basislayouts ist es jedenfalls sehr hilfreich.

Gruss Gun

[djesse]

Hallo gun,

css: Spaltenanordnung 2,1,3, shiny_buttons, background_colums, content, patches...

Beim Zusammenfassen (optimieren) kommen dann schnell 7 und mehr Dateien zusammen. Dateien die im Betrieb alle einzeln heruntergeladen werden, die zum Teil aus mehr Copyrightinfos bestehen als aus css-code.

Die Beispiellayouts von YAML sind auch nicht 1:1 für den Praxiseinsatz gedacht, sondern sie sollen die Arbeitsweise des Frameworks, bzw. die Funktionsweise einzelner Features demonstieren und werden daher gut kommentiert in mundgerechten Stücken serviert. Es mag sein, dass beim Erstkontakt etwas mehr Zeit drauf geht, um sich einen Überblick zu verschaffen. Würde ich jedoch alle Inhalte in eine CSS-Datei packen, wäre die Übersicht nicht zwingend besser, die Pflege, und stetige Erweiterung der mittlerweile > 30 Layoutbeispiele würde für mich aber deutlich anstrengender und fehleranfälliger werden.

Andere Frameworks machen das Leben für Anwender leichter, sie verzichten einfach auf komplexe Anwendungsbeispiele. ;)

Gruß
Dirk

[makcie]

Hallo gun,

aus eigener Erfahrung weiß ich, dass man eine gewisse Einarbeitungszeit braucht, um sich in das YAML-
Framework und in die einzelnen Beispiele hineinzudenken. Aber wer den Einstieg geschafft hat, hat einen echten Zeitgewinn beim Erstellen eines flexiblen, barrierearmen und browserübergreifenden Layoutgerüsts. Und YAML lässt Dir viele Freiheit für die weitere Arbeit (Navigation, Design).
An die "vielen" Dateien kann man sich ganz gut gewöhnen und man kann sich auch gut darin zurechtfinden, nicht zuletzt wegen der umfangreichen Kommentare.
Wenn Deine mit YAML erstellten Webseiten funktionieren, kannst Du die Dateien optimieren und ihren Umfang reduzieren. Hast Du Dir in diesem Zusammenhang mal die drei Slimvarianten im core-Ordner angesehen? Wenn Du mit dem YAML Builder arbeitest, bekommst Du für das gewählte Beispiel nur e i n e basemod.css geliefert (in den Originalbeispielen sind es in der Regel zwei Dateien). Du kannst auch die basemod.css mit der content.css zusammenfassen, wenn Dir das besser gefällt. Man muss nur wissen, was man tut und welche Auswirkungen Änderungen haben.

Wenn dich das Thema so sehr beschäftigt und Du etwas Zeit hast, dann könntest Du Dich über die Vor- und Nachteile von CSS-Frameworks näher informieren:
http://www.highresolution.info/spotl...issen_sollten/

Ein schönes Wochenende wünscht Dir
makcie

PS: Ansonsten - es ist jedem freigestellt mit einem Framework zu arbeiten oder darauf zu verzichten. Bitte gun, nimm diese Bemerkung nicht krumm, aber das sollte auch mal deutlich gesagt werden.