it-swarm.com.de

Einzelne große .css-Datei im Vergleich zu mehreren kleineren spezifischen .css-Dateien?

Gibt es einen Vorteil, wenn eine einzige Monster-.css-Datei vorhanden ist, die Stilelemente enthält, die auf fast jeder Seite verwendet werden?

Ich denke, zur Vereinfachung der Verwaltung möchte ich verschiedene CSS-Typen in ein paar Dateien ziehen und jede Datei in meinen Hauptcode einfügen. <link /> ist das so schlimm?

Ich denke, das ist besser

  1. positionen.css 
  2. buttons.css 
  3. tables.css
  4. copy.css

vs.

  1. site.css

Haben Sie gesehen, dass es ein Problem mit dem einen oder anderen Weg ist?

237
Nate

Ein CSS-Compiler wie Sass oder LESS ist ein guter Weg. Auf diese Weise können Sie eine einzelne, minimierte CSS-Datei für die Site bereitstellen (die weitaus kleiner und schneller als eine normale einzelne CSS-Quelldatei ist) und dabei die schönste Entwicklungsumgebung beibehalten, wobei alles übersichtlich in Komponenten aufgeteilt ist.

Sass und LESS haben den zusätzlichen Vorteil von Variablen, Verschachtelung und anderen Möglichkeiten, um das Schreiben und Verwalten von CSS zu vereinfachen. Sehr zu empfehlen. Ich persönlich verwende jetzt Sass (SCSS-Syntax), habe aber vorher LESS verwendet. Beide sind großartig und haben ähnliche Vorteile. Wenn Sie CSS mit einem Compiler geschrieben haben, möchten Sie wahrscheinlich auf eines verzichten.

http://lesscss.org

http://sass-lang.com

Wenn Sie nicht mit Ruby herumspielen wollen, ist dieser LESS-Compiler für Mac großartig:

http://incident57.com/less/

Oder Sie können CodeKit (von den gleichen Jungs) verwenden:

http://incident57.com/codekit/

WinLess ist eine Windows-GUI zum Komprimieren von LESS

http://winless.org/

74
Marc Edwards

Dies ist schwer zu beantworten. Beide Möglichkeiten haben meiner Meinung nach ihre Vor- und Nachteile.

Ich persönlich liebe es nicht, nur eine einzige GROSSE CSS-Datei zu lesen. Auf der anderen Seite verursacht das Aufteilen zusätzliche HTTP-Anforderungen, die die Dinge möglicherweise verlangsamen könnten.

Meine Meinung wäre eines von zwei Dingen.

1) Wenn Sie wissen, dass sich Ihr CSS NIEMALS ändert, sobald Sie es erstellt haben, würde ich im Entwicklungsstadium (zur besseren Lesbarkeit) mehrere CSS-Dateien erstellen und diese dann manuell kombinieren, bevor Sie live gehen (um HTTP-Anfragen zu reduzieren).

2) Wenn Sie wissen, dass Sie Ihr CSS ab und zu ändern und lesbar bleiben müssen, würde ich separate Dateien erstellen und Code verwenden (vorausgesetzt, Sie verwenden eine Art von Programmiersprache), um sie zu kombinieren laufzeit Bauzeit (Laufzeitminifizierung kombination ist ein Ressourcenschwein).

Bei beiden Optionen würde ich die Zwischenspeicherung auf der Clientseite dringend empfehlen, um die HTTP-Anforderungen weiter zu reduzieren.

EDIT:
Ich habe dieses/- blog
gefunden, das zeigt, wie man CSS zur Laufzeit nur mit Code kombiniert. Einen Blick wert (obwohl ich es selbst noch nicht getestet habe).

EDIT 2:
Ich habe mich dazu entschieden, in meiner Entwurfszeit separate Dateien zu verwenden und einen Erstellungsprozess zu minimieren und zu kombinieren. Auf diese Weise kann ich separate (verwaltbare) css-Dateien haben, während ich entwickle, und zur Laufzeit eine richtige monolithische minified-Datei. Ich habe immer noch meine statischen Dateien und weniger Systemaufwand, da ich zur Laufzeit keine Komprimierung/Minifizierung durchführe.

Hinweis: Für Ihre Einkäufer empfehle ich dringend die Verwendung von bundler als Teil Ihres Build-Prozesses. Egal, ob Sie von innerhalb Ihrer IDE oder von einem Build-Skript aus erstellen, Bundler kann unter Windows über ausgeführt werden Die eingeschlossene exe oder kann auf jedem Rechner ausgeführt werden, auf dem bereits node.js ausgeführt wird.

141
Chase Florell

Ich bevorzuge mehrere CSS-Dateien während der Entwicklung. Management und Debugging sind auf diese Weise viel einfacher. Ich schlage jedoch vor, dass Sie bei der Bereitstellung stattdessen ein CSS-Minify-Tool wie YUI Compressor verwenden, das Ihre CSS-Dateien in einer einzigen monolithischen Datei zusammenführt.

31
Randy Simon

Wenn Sie nur eine CSS-Datei haben, ist dies für die Ladezeit Ihrer Seiten besser, da weniger HTTP-Anforderungen erforderlich sind.

Wenn Sie mehrere kleine CSS-Dateien haben, ist die Entwicklung einfacher. (Ich denke zumindest: Eine CSS-Datei pro Modul Ihrer Anwendung macht es einfacher)}.

In beiden Fällen gibt es also gute Gründe ...


Eine Lösung, mit der Sie das Beste aus beiden Ideen herausholen können, wäre:

  • So entwickeln Sie mit mehreren kleinen CSS-Dateien
    • leichter zu entwickeln
  • Um einen Build-Prozess für Ihre Anwendung zu haben, "fügt" diese Dateien diese zu einem .__ zusammen.
    • Dieser Build-Prozess könnte auch diese große Datei minimieren, übrigens
    • Dies bedeutet natürlich, dass Ihre Anwendung über Konfigurationsmöglichkeiten verfügen muss, die es ermöglichen, vom "Multi-File-Modus" in den "Mono-File-Modus" zu wechseln.
  • Und in der Produktion nur die große Datei zu verwenden
    • schnelleres Laden von Seiten

Es gibt auch Software, die CSS-Dateien zur Laufzeit und nicht zur Build-Zeit kombiniert. Wenn Sie dies jedoch zur Laufzeit tun, essen Sie etwas mehr CPU (und obvisualy erfordert einige Zwischenspeicherungsmechanismen, um die große Datei nicht zu oft neu zu generieren.)

13
Pascal MARTIN

Du willst beide Welten.

Sie möchten mehrere CSS-Dateien, weil Ihre Vernunft etwas Schreckliches ist.

Gleichzeitig ist es besser, eine einzige große Datei zu haben.

Die Lösung besteht darin, einen Mechanismus zu haben, der die mehreren Dateien in einer einzigen Datei zusammenfasst.

Ein Beispiel ist so etwas

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Das Skript allcss.php behandelt dann die Verkettung der Dateien und liefert sie.

Idealerweise überprüft das Skript die Mod-Daten aller Dateien, erstellt ein neues Composite, wenn sich eines davon ändert, gibt dieses Composite zurück und prüft dann die If-Modified-HTTP-Header, um kein redundantes CSS zu senden.

Das gibt Ihnen das Beste aus beiden Welten. Funktioniert auch für JS.

13
Will Hartung

Monolithische Stylesheets bieten viele Vorteile (die in den anderen Antworten beschrieben werden). Abhängig von der Gesamtgröße des Stylesheet-Dokuments können jedoch Probleme mit dem IE auftreten. IE hat eine Einschränkung hinsichtlich der Anzahl der Selektoren, die er aus einer single-Datei lesen wird. Die Grenze liegt bei 4096 Selektoren. Wenn Sie ein monolithisches Stylesheet haben, das mehr enthält, sollten Sie es teilen. Diese Einschränkung bewirkt nur, dass es im IE hässlicher Kopf ist.

Dies gilt für alle Versionen von IE.

Siehe Ross Bruniges Blog und MSDN AddRule-Seite .

11
TheClair

Es gibt einen Wendepunkt, an dem es vorteilhaft ist, mehr als eine CSS-Datei zu haben.

Eine Site mit 1M + -Seiten, von denen der durchschnittliche Benutzer wahrscheinlich immer nur 5 von je sehen kann, hat möglicherweise ein Stylesheet mit enormen Proportionen. Wenn Sie also den Aufwand einer einzigen zusätzlichen Anforderung pro Seite durch einen massiven anfänglichen Download sparen, ist dies falsch Wirtschaft.

Streichen Sie das Argument bis an die äußerste Grenze - es ist, als würde man sagen, dass es ein großes Stylesheet für das gesamte Web geben sollte. Eindeutig unsinnig.

Der Wendepunkt ist jedoch für jeden Standort unterschiedlich, es gibt also keine harten Regeln. Dies hängt von der Anzahl der eindeutigen CSS pro Seite, der Anzahl der Seiten und der Anzahl der Seiten ab, auf die der durchschnittliche Benutzer während der Nutzung der Site regelmäßig stößt.

7
Claud

Ich habe normalerweise eine Handvoll CSS-Dateien:

  • eine "globale" CSS-Datei für das Zurücksetzen und globale Formatvorlagen
  • "modulspezifische" CSS-Dateien für Seiten, die logisch gruppiert sind (möglicherweise jede Seite in einem Checkout-Assistenten oder etwas anderes)
  • "page" -spezifische CSS-Dateien für Überschreibungen auf der Seite (oder fügen Sie diese in einen Block auf der einzelnen Seite ein)

Ich bin nicht wirklich besorgt über mehrere Seitenanfragen für CSS-Dateien. Die meisten Benutzer verfügen über eine anständige Bandbreite, und ich bin mir sicher, dass es andere Optimierungen gibt, die weitaus größere Auswirkungen haben als die Kombination aller Stile in einer monolitischen CSS-Datei. Der Kompromiss ist zwischen Geschwindigkeit und Wartbarkeit, und ich neige immer zu Wartbarkeit. Der YUI-Compsor klingt zwar ziemlich cool, ich muss das vielleicht überprüfen.

4
Nicholas Cloud

Werfen Sie einen Blick auf compass , ein Open-Source-CSS-Authoring-Framework. Es basiert auf Sass und unterstützt so coole Dinge wie Variablen, Verschachtelung, Mixins und Importe. Importe sind besonders nützlich, wenn Sie kleinere CSS-Dateien trennen möchten, diese jedoch automatisch zu 1 zusammenfassen möchten (um mehrere langsame HTTP-Aufrufe zu vermeiden). Browserzeugnisse . Es ist in Ruby geschrieben, kann jedoch problemlos mit jedem System verwendet werden ....

4
stikkos

Historisch gesehen ist einer der Hauptvorteile x einer einzigen CSS-Datei der Geschwindigkeitsvorteil bei der Verwendung von HTTP1.1.

Seit März 2018 unterstützen jedoch mittlerweile mehr als 80% der Browser HTTP2. Mit HTTP2 kann der Browser mehrere Ressourcen gleichzeitig herunterladen und Ressourcen vorab pushen. Wenn Sie für alle Seiten eine einzige CSS-Datei haben, ist die Dateigröße größer als erforderlich. Mit dem richtigen Design sehe ich keinen Vorteil darin, außer dass es einfacher zu programmieren ist.

Das ideale Design für HTTP2 wäre die beste Leistung: - Verfügt über eine zentrale CSS-Datei, die allgemeine Stile enthält, die auf allen Seiten verwendet werden .. _.- Seitenspezifische CSS in einer separaten Datei haben - Verwenden Sie HTTP2 Push CSS to Wartezeit minimieren (ein Cookie kann verwendet werden, um wiederholte Pushs zu verhindern) - Optional über dem Falz-CSS trennen und zuerst Push drücken und das verbleibende CSS später laden (nützlich für mobile Geräte mit geringer Bandbreite) - Sie könnten auch Laden Sie verbleibendes CSS für die Website oder bestimmte Seiten, nachdem die Seite geladen wurde, wenn Sie das Laden künftiger Seiten beschleunigen möchten.

3
DD.

Ich bevorzuge mehrere CSS-Dateien. Auf diese Weise ist es einfacher, "Skins" nach Belieben ein- und auszutauschen. Das Problem bei einer monolithischen Datei ist, dass sie außer Kontrolle gerät und schwer zu verwalten ist. Was ist, wenn Sie einen blauen Hintergrund wünschen, die Tasten jedoch nicht ändern möchten? Ändern Sie einfach Ihre Hintergrunddatei. Usw.

3
Robusto

hier ist der beste weg:

  1. erstellen Sie eine allgemeine CSS-Datei mit dem gesamten gemeinsam genutzten Code
  2. fügen Sie den spezifischen Seiten-CSS-Code auf derselben Seite, im Tag oder mit dem Attribut style = "" für jede Seite ein

auf diese weise haben sie nur eine css mit dem gesamten gemeinsam genutzten code und eine html-seite mit Ihren Js- und CSS-Dateien). auf diese Weise reduzieren Sie noch mehr http-Anfragen auf 1.

2
Ismael Miguel

SASS und WENIGER machen dies alles zu einem Streitpunkt. Der Entwickler kann effektive Komponentendateien einrichten und diese beim Kompilieren alle zusammenstellen. In SASS können Sie den komprimierten Modus während der Entwicklung ausschalten, um das Lesen zu erleichtern, und ihn für die Produktion wieder einschalten. 

http://sass-lang.comhttp://lesscss.org

Am Ende ist eine einzige minimierte CSS-Datei das, was Sie wollen, unabhängig von der verwendeten Technik. Weniger CSS, weniger HTTP-Anforderungen, weniger Bedarf auf dem Server. 

2
augurone

Ich verwende Jammit , um mit meinen CSS-Dateien umzugehen und zur besseren Lesbarkeit viele verschiedene Dateien zu verwenden. Jammit erledigt die schmutzige Arbeit des Kombinierens und Komprimierens der Dateien vor der Bereitstellung in der Produktion. Auf diese Weise habe ich viele Dateien in der Entwicklung, aber nur eine Datei in der Produktion.

1
jlfenaux

Der Vorteil einer einzelnen CSS-Datei ist die Übertragungseffizienz. Jede HTTP-Anforderung bedeutet eine HTTP-Header-Antwort für jede angeforderte Datei, die Bandbreite beansprucht.

Ich stelle mein CSS als PHP -Datei mit dem Mime-Typ "text/css" im HTTP-Header zur Verfügung. Auf diese Weise kann ich mehrere CSS-Dateien auf der Serverseite haben und PHP include verwenden, um sie auf Anforderung des Benutzers in eine einzige Datei zu verschieben. Jeder moderne Browser erhält die .php-Datei mit dem CSS-Code und verarbeitet sie als .css-Datei.

1
austin cheney

Sie können nur eine CSS-Datei für die Leistung verwenden und dann Abschnitte wie folgt auskommentieren:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

usw

1
Catfish

Ich habe einen systematischen Ansatz für die CSS-Entwicklung geschaffen. Auf diese Weise kann ich einen Standard verwenden, der sich nie ändert. Zuerst habe ich mit dem 960-Rastersystem begonnen. Dann erstellte ich einzelne Zeilen von CSS für grundlegende Layouts, Ränder, Füllungen, Schriftarten und Größen. Ich fädle sie dann nach Bedarf zusammen. Dadurch kann ich in allen meinen Projekten ein einheitliches Layout beibehalten und immer wieder dieselben CSS-Dateien verwenden. Weil sie nicht spezifisch sind. Hier ist ein Beispiel: ---- div class = "c12 bg0 m10 p5 white fl"/div --- Dies bedeutet, dass der Container 12 Spalten groß ist links. Ich könnte dies leicht ändern, indem ich einen neuen - was ich einen "leichten" Stil nenne - entfernt oder hinzufügt. Ich kombiniere einfach die einzelnen Stile, wenn ich die Seite codiere. Dadurch kann ich eine beliebige Kombination von Stilen erstellen und schränkt meine Kreativität nicht ein oder veranlasst mich dazu, eine enorme Anzahl ähnlicher Stile zu erstellen. Ihre Stylesheets werden viel einfacher zu verwalten, minimiert und ermöglichen es Ihnen, sie immer wieder zu verwenden. Diese Methode hat sich für das schnelle Design als fantastisch herausgestellt. Ich entwerfe auch nicht mehr zuerst in PSD, sondern im Browser, was auch Zeit spart. Da ich auch ein Benennungssystem für meine Hintergründe und Seitendesignattribute erstellt habe, ändere ich beim Erstellen eines neuen Projekts einfach meine Image-Datei Hintergrund mit einem Projekt einfach in Schwarz ändern bedeutet einfach, dass im nächsten Projekt bg0 ein schwarzer Hintergrund oder ein anderes Bild sein wird ..... Ich habe mit dieser Methode noch nichts gefunden und es scheint sehr gut zu funktionieren. 

0
raquel

Ein im Lieferumfang enthaltenes Stylesheet spart möglicherweise die Leistung beim Laden von Seiten. Je mehr Stile vorhanden sind, desto langsamer rendert der Browser Animationen auf der Seite, auf der Sie sich befinden. Dies wird durch die große Anzahl nicht verwendeter Stile verursacht, die möglicherweise nicht auf der Seite vorhanden sind, auf der Sie sich befinden, der Browser muss jedoch noch berechnen.

Siehe: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Gebündelte Stylesheets-Vorteile: - Leistung beim Laden von Seiten

Gebündelte Stylesheets-Nachteile: - langsameres Verhalten, das beim Scrollen, Interaktivität, Animationen 

Fazit: Um beide Probleme zu lösen, ist es für die Produktion die ideale Lösung, alle CSS in einer Datei zu bündeln, um HTTP-Anforderungen zu speichern. Verwenden Sie jedoch JavaScript, um aus dieser Datei das CSS für die von Ihnen verwendete Seite zu extrahieren ein und aktualisiere den Kopf damit.

Um zu wissen, welche gemeinsam genutzten Komponenten pro Seite benötigt werden, und um die Komplexität zu reduzieren, wäre es schön, alle Komponenten zu deklarieren, die diese bestimmte Seite verwendet, zum Beispiel:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">
0
Steve Tomlin