Es gibt zahlreiche Aussagen, Theorien und Meinungen, wie man sein CSS organisieren sollte. Ich stelle bei mir fest, daß sich mein System über die Jahre ständig verändert hat und sich teilweise an die Projekte anpassen musste. Interessant ist, daß es aber offenbar ein paar wenige absolute Limitierungen gibt. Denn zumindest für den Internet Explorer ist bekannt, ab welcher Schachtelungstiefe oder Komplexität er aussteigt. Für die anderen Browser kenne ich solche Limits nicht. Deshalb finde ich, wir sollten sie als absolutes Limit sehen. Denn wir wollen doch, daß die Styles in den Browsern ankommen.
- Ein Stylesheet darf beim IE bis zu 4095 Regeln haben.
- Der IE akzeptiert bis zu 31 @import-Regeln in einem CSS.
- Der IE akzeptiert ein @import mit bis zu 4 Ebenen tiefer Verlinkung.
Die 2000 Klassen, die man pro Element auf alle Fälle vergeben kann, sollten jedem reichen. Opera, Safari (und Chrome?!) vertragen sogar mehr als 4000 Klassen.
Die Testseiten für die @import-Regeln und die 4095 Selektoren zeigen, daß diese Limitierungen offenbar browserspezifisch sind. Chrome, Firefox 4 und Opera 11 zeigen in beiden Tests keine Schwächen.
17. Mai 2011 um 14:55 Uhr
Aus meiner Erfahrung gibt es noch eine weitere Einschränkung mit der man leben muss die bis einschließlich Internet Explorer 7 gilt.
Ab einer Dateigröße von circa 277kb bricht das Parsing der Deklarationen ab, d.h. alle Anweisungen die „oberhalb“ der Grenze liegen, werden zwar geladen aber nicht mehr für die Ausgabe interpretiert. Dies gilt für jede geladene CSS-Datei.
Sollte man immer im Hinterkopf haben, sofern man ein CMS nutzt, welches eine Zusammenfassung aller CSS-Dateien anbietet.
17. Mai 2011 um 15:01 Uhr
Hey! Es sind 31 Stylesheets, die IE importiert. Bin damit mal böse auf die Nase gefallen 😉
17. Mai 2011 um 15:05 Uhr
@Micha149: Du hast recht. Ich habe es falsch übertragen, ich kleiner Depp 🙂
23. Mai 2011 um 12:16 Uhr
Aus performance Gründen sollte man zumindest abseits von Entwicklungsumgebung doch so oder so nur ein Stylesheet verwenden. Und das auch noch minified. Wer da über 277kb kommt sollte sich wirklich Gedanken machen 😉
Auf die Verwendung von @import sollte man um paralleles downloaden im IE zu ermöglichen auch verzichten.