Eine große CSS-Datei vs mehrere kleine CSS-Dateien

Question

Ich habe verschiedene Informationen über diese Frage gelesen, und ich sehe immer, dass Leute vorschlagen, eine große CSS-Datei, aus der Sicht der Leistung. Aber ich verstehe nicht, dauert es nicht länger, die CSS-Datei für alle Seiten zu laden und dann jede für jede Seite zu laden, wenn es angefordert wird? (Beispiele von dem, was ich gesehen habe: Multiple css files or one big css file? und Single huge .css file vs. multiple smaller specific .css files?). Ja, vielleicht gibt es mehrere HTTP-Anfragen, aber sie werden in den verschiedenen Zeiträumen auftreten, also ist es im Grunde nicht besser, jede Seite zu laden, wenn sie benötigt wird, und dann beim Laden von CSS für jede Seite am Anfang Zeit zu verschwenden und dann sie im laufenden Betrieb anzeigen?

Answer 1

Es gibt Vor- und Nachteile beider Ansätze.

Mit mehreren CSS Dateien können Sie Ihre CSS Dateien ordnungsgemäß in der Entwicklung zu organisieren und zu gruppieren. Dies bedeutet jedoch auch, dass mehrere Anforderungen an HTTP gestellt werden müssen. HTTP Anfragen sind teurer in Bezug auf die Ladezeit, da es den Server kontaktieren und die Datei abrufen muss.

Auch wenn eine Datei geladen ist, wird sie vom Browser zwischengespeichert. Das heißt, auch wenn das Laden der huge.css anfangs zu langsam ist, muss es beim Navigieren auf der Site nicht erneut geladen werden.

In meiner Erfahrung und von den meisten Entwicklern angepasst, könnten Sie etwas wie unten tun, um die meisten der beiden Welten zu bekommen.

Verwenden Sie css pre-processers wie SASS oder LESS. Fragen Sie mich nicht, welches ist besser, es gibt bereits genug Argumente im Internet über diese topic. Wählen Sie einfach eine, mit der Sie sich wohl fühlen. Meine Vorliebe ist SASS.

CSS-Pre-Processors ermöglicht Ihnen, Ihre CSS-Dateien in kleinere organisierte Dateien zu teilen. Zum Beispiel könnten Sie ein main.sass haben, die menu.sass, footer.sass, etc.

main.sass

include _menu 
include _footer 
include _header 
... 

_ sass zu kompilieren erzählt umfasst nicht getrennte Dateien für jede dieser Dateien sass. Also werden sie alle nur zu einem einzigen main.css kompiliert werden. Diese Pre-Prozessoren verfügen über eine Funktion zum Kompilieren der angegebenen Sass-Dateien in eine CSS-Datei, die der Browser lesen kann. Sie können auch Tools wie [livereload][4] verwenden, um sie in Echtzeit zu kompilieren.

Sie werden diese Sass-Dateien in Ihrem Entwicklungscode haben. In Ihrem Produktionscode können Sie jedoch einfach die kompilierte einzelne Datei css verwenden.

Wenn Sie sich wohler fühlen und die Dinge weiterführen möchten, können Sie das Werkzeug Grunt oder Gulp verwenden. Sie ermöglichen es, Ihre Entwicklungsaufgaben zu automatisieren oder Prozesse aufzubauen. Idealerweise könnten Sie in der Entwicklung eine grunt task haben, die all Ihre Sass-Dateien überwacht und automatisch in die Datei main.css kompiliert. In Ihrer index.html können Sie sich auf diese main.css beziehen. Sobald Sie zufrieden sind, können Sie auch eine andere Aufgabe namens build task haben, die automatisch alle Ihre CSS-Dateien kompiliert und minimiert.

Um Ihre Frage zu klären:

Es hängt davon ab, was von Fall am besten in Fall ist, welche Art von Website, die Sie haben und wie haben Sie es gebaut.

Wenn Sie eine Website haben, auf der die Besucher höchstwahrscheinlich nie auf der Website navigieren, als auf bestimmten Seiten, dann ist es besser, CSS für diese bestimmte Seite zu laden und nicht zu kombinieren. Sie können diese CSS-Dateien in den für diese Seite spezifischen Teiltönen laden.

In meiner Erfahrung viele viele Baustellen,

1. seine fast immer am besten, eine kombinierte CSS zu laden.
2. Wenn eine bestimmte Seite erfordert css wird wahrscheinlich nicht oft besucht werden, enthalten eine Seite spezifische css in seiner templete separat mit einem bedingten script-Tag.
3. Minimieren Sie alle CSS-Dateien nahezu 100% der Zeit

Auch ich werde vorschlagen, dass Sie mehr Zeit der Verbesserung der Effizienz der Server-seitigen Code oder Datenbank, dann zu viel über die CSS-Sorgen verbringen. Es wird produktiver sein, da die meisten Ineffizienzen auf der Serverseite liegen.

Answer 2

Als Antwort auf diese Frage ist es am besten festzustellen, in welchem ​​Browser der Benutzer die Seite anschaut, und dann abhängig davon in x.css, y.css zu laden. Dies kann auch die Anzahl der CSS-Fehler, die im Browser angezeigt werden, massiv reduzieren, was, so das Gerücht, für SEO gut ist.

Answer 3

Ich benutze mehrere CSS-Dateien, dividiert durch Funktion. Es gibt eine globale, eine für das Seitenlayout, eine für die Menüs, eine für die Tab-Controls etc. Ich habe auch kaskadierte für Desktop und Mobile - nur eine wird angewendet. Und dann habe ich weitere kaskadierte zum Enthäuten nach Benutzerwunsch. Und ich wähle aus, welche basierend auf Seite, Plattform und Benutzer geladen werden sollen. Dafür ist PHP da.