Einzelne große CSS-Datei im Vergleich zu mehreren kleineren spezifischen CSS-Dateien? [geschlossen]

Gibt es einen Vorteil, wenn eine einzelne Monster-CSS-Datei Stilelemente enthält, die auf fast jeder Seite verwendet werden?

Ich denke, dass ich zur Vereinfachung der Verwaltung verschiedene Arten von CSS in einige Dateien ziehen und jede Datei in meine Hauptdatei aufnehmen möchte. Ist <link />das so schlecht?

Ich denke das ist besser

1. positions.css
2. button.css
3. tables.css
4. copy.css

vs.

1. site.css

Hast du irgendwelche Fallstricke gesehen, wenn du es so oder so gemacht hast?

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 viel kleiner und schneller als eine normale einzelne CSS-Quelldatei ist), während Sie die schönste Entwicklungsumgebung beibehalten und alles ordentlich in Komponenten aufteilen.

Sass und LESS bieten den zusätzlichen Vorteil von Variablen, Verschachtelungen und anderen Möglichkeiten, um das Schreiben und Verwalten von CSS zu vereinfachen. Sehr, sehr zu empfehlen. Ich persönlich verwende jetzt Sass (SCSS-Syntax), habe aber zuvor WENIGER verwendet. Beide sind großartig, mit ähnlichen Vorteilen. Sobald Sie CSS mit einem Compiler geschrieben haben, ist es unwahrscheinlich, dass Sie auf einen verzichten möchten.

http://lesscss.org

http://sass-lang.com

Wenn Sie nicht mit Ruby herumspielen möchten, ist dieser WENIGER Compiler für Mac großartig:

http://incident57.com/less/

Oder Sie könnten CodeKit verwenden (von denselben Leuten):

http://incident57.com/codekit/

WinLess ist eine Windows-GUI zum Komprimieren von WENIGER

http://winless.org/

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

Ich persönlich liebe es nicht, eine einzige RIESIGE CSS-Datei zu lesen, und es ist sehr schwierig, sie zu pflegen. Auf der anderen Seite führt das Aufteilen zu zusätzlichen http-Anforderungen, die möglicherweise zu einer Verlangsamung führen können.

Meine Meinung wäre eines von zwei Dingen.

1) Wenn Sie wissen, dass sich Ihr CSS nach dem Erstellen NIEMALS ändern wird, würde ich in der Entwicklungsphase mehrere CSS-Dateien erstellen (aus Gründen der Lesbarkeit) und diese dann manuell kombinieren, bevor sie live geschaltet werden (um http-Anforderungen zu reduzieren).

2) Wenn Sie wissen, dass Sie Ihr CSS von Zeit zu Zeit ändern werden und es lesbar halten müssen, würde ich separate Dateien erstellen und Code verwenden (vorausgesetzt, Sie verwenden eine Art Programmiersprache), um sie zu kombinieren Laufzeiterstellungszeit (Laufzeitminimierung / -kombination ist ein Ressourcenschwein).

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

EDIT:
Ich habe diesen Blog gefunden , der zeigt, wie man CSS zur Laufzeit nur mit Code kombiniert. Ein Blick lohnt sich (obwohl ich es selbst noch nicht getestet habe).

BEARBEITEN 2:
Ich habe mich in meiner Entwurfszeit für die Verwendung separater Dateien und einen Erstellungsprozess zum Minimieren und Kombinieren entschieden. Auf diese Weise kann ich während der Entwicklung ein separates (verwaltbares) CSS und zur Laufzeit eine ordnungsgemäße monolithisch minimierte Datei haben. Und ich habe immer noch meine statischen Dateien und weniger Systemaufwand, weil ich zur Laufzeit keine Komprimierung / Minimierung durchführe.

Hinweis: Für Ihre Kunden da draußen empfehle ich dringend, Bundler als Teil Ihres Erstellungsprozesses zu verwenden. Unabhängig davon, ob Sie aus Ihrer IDE oder aus einem Build-Skript erstellen, kann exeder Bundler unter Windows über das mitgelieferte System ausgeführt oder auf jedem Computer ausgeführt werden, auf dem bereits node.js ausgeführt wird.

Ich bevorzuge mehrere CSS-Dateien während der Entwicklung. Verwaltung 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, mit dem Ihre CSS-Dateien zu einer monolithischen Datei zusammengeführt werden.

Du willst beide Welten.

Sie möchten mehrere CSS-Dateien, weil Ihre geistige Gesundheit eine schreckliche Verschwendung 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 zu einer einzigen Datei kombiniert.

Ein Beispiel ist so etwas wie

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

Anschließend übernimmt das Skript allcss.php die Verkettung und Übermittlung der Dateien.

Im Idealfall überprüft das Skript die Mod-Daten aller Dateien, erstellt einen neuen Verbund, wenn sich einer von ihnen ändert, gibt diesen Verbund zurück und prüft dann die If-Modified-HTTP-Header, um kein redundantes CSS zu senden.

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

Nur eine CSS-Datei ist für die Ladezeit Ihrer Seiten besser, da weniger HTTP-Anforderungen erforderlich sind.

Wenn Sie mehrere kleine CSS-Dateien haben, ist die Entwicklung einfacher (zumindest denke ich: Eine CSS-Datei pro Modul Ihrer Anwendung erleichtert die Arbeit) .

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:

• Entwicklung mit mehreren kleinen CSS-Dateien
  • dh leichter zu entwickeln
• Um einen Erstellungsprozess für Ihre Anwendung zu haben, "kombiniert" dieser diese Dateien zu einer
  • Dieser Erstellungsprozess könnte übrigens auch diese große Datei minimieren
  • Dies bedeutet natürlich, dass Ihre Anwendung über einige Konfigurationselemente verfügen muss, die es ihr ermöglichen, vom "Multi-File-Modus" in den "Mono-File-Modus" zu wechseln.
• Und in der Produktion nur die große Datei zu verwenden
  • dh schnelleres Laden von Seiten

Es gibt auch einige Software, die das Kombinieren von CSS-Dateien zur Laufzeit und nicht zur Erstellungszeit ausführen. Wenn Sie dies jedoch zur Laufzeit tun, müssen Sie etwas mehr CPU verbrauchen (und obvisouly erfordert einen gewissen Caching-Mechanismus, um die große Datei nicht zu oft neu zu generieren).

In der Vergangenheit war einer der Hauptvorteile x bei der Verwendung einer einzelnen CSS-Datei der Geschwindigkeitsvorteil bei Verwendung von HTTP1.1.

Ab März 2018 unterstützen jedoch über 80% der Browser HTTP2 , wodurch der Browser mehrere Ressourcen gleichzeitig herunterladen und Ressourcen vorbeugend pushen kann. Eine einzige CSS-Datei für alle Seiten bedeutet, dass die Datei größer als erforderlich ist. Bei richtigem Design sehe ich keinen Vorteil darin, außer dass es einfacher zu codieren ist.

Das ideale Design für HTTP2 für beste Leistung wäre:

• Verfügen Sie über eine CSS-Kerndatei, die gemeinsame Stile enthält, die auf allen Seiten verwendet werden.
• Haben Sie seitenspezifisches CSS in einer separaten Datei
• Verwenden Sie HTTP2-Push-CSS, um die Wartezeit zu minimieren (ein Cookie kann verwendet werden, um wiederholte Pushs zu verhindern).
• Trennen Sie optional über dem Falz-CSS und drücken Sie dieses zuerst und laden Sie das verbleibende CSS später (nützlich für mobile Geräte mit geringer Bandbreite).
• Sie können auch verbleibendes CSS für die Site oder bestimmte Seiten nach dem Laden der Seite laden, wenn Sie das zukünftige Laden von Seiten beschleunigen möchten.

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 im IE auftreten. IE hat eine Einschränkung hinsichtlich der Anzahl der Selektoren, die aus einer einzelnen Datei gelesen werden . Das Limit liegt bei 4096 Selektoren. Wenn Sie ein monolithisches Stylesheet haben, das mehr als dieses hat, möchten Sie es teilen. Diese Einschränkung lässt nur den hässlichen Kopf im IE erkennen.

Dies gilt für alle Versionen von IE.

Siehe Ross Bruniges Blog und MSDN AddRule-Seite .

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

Eine Site mit mehr als 1 Million Seiten, von der der durchschnittliche Benutzer wahrscheinlich immer nur 5 Seiten sieht, verfügt möglicherweise über ein Stylesheet von immensen Ausmaßen. Daher ist es falsch, den Overhead einer einzelnen zusätzlichen Anforderung pro Seitenladevorgang durch einen massiven Erstdownload zu sparen Wirtschaft.

Dehnen Sie das Argument bis zum Äußersten aus - es ist, als würde man vorschlagen, dass ein großes Stylesheet für das gesamte Web verwaltet wird. Offensichtlich unsinnig.

Der Wendepunkt ist jedoch für jede Site unterschiedlich, sodass es keine feste Regel gibt. 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 bei der Nutzung der Website wahrscheinlich routinemäßig stößt.

Ich habe normalerweise eine Handvoll CSS-Dateien:

• Eine "globale" CSS-Datei für Zurücksetzungen und globale Stile
• "Modul" -spezifische CSS-Dateien für Seiten, die logisch gruppiert sind (möglicherweise jede Seite in einem Checkout-Assistenten oder so etwas)
• "Seite" spezifische CSS-Dateien für Überschreibungen auf der Seite (oder setzen Sie diese in einen Block auf der einzelnen Seite)

Ich bin nicht wirklich besorgt über mehrseitige Anfragen nach CSS-Dateien. Die meisten Leute haben eine anständige Bandbreite und ich bin sicher, dass es andere Optimierungen gibt, die einen weitaus größeren Einfluss haben würden, als alle Stile in einer monolitischen CSS-Datei zu kombinieren. Der Kompromiss liegt zwischen Geschwindigkeit und Wartbarkeit, und ich neige immer zur Wartbarkeit. Der YUI-Comperssor klingt allerdings ziemlich cool, ich muss das vielleicht überprüfen.

Ich bevorzuge mehrere CSS-Dateien. Auf diese Weise ist es einfacher, "Skins" nach Belieben ein- und auszutauschen. Das Problem mit einer monolithischen Datei ist, dass sie außer Kontrolle geraten und schwer zu verwalten sein kann. Was ist, wenn Sie einen blauen Hintergrund wünschen, aber nicht möchten, dass sich die Schaltflächen ändern? Ändern Sie einfach Ihre Hintergrunddatei. Etc.

Vielleicht werfen Sie einen Blick auf Kompass , ein Open-Source-CSS-Authoring-Framework. Es basiert auf Sass und unterstützt coole Dinge wie Variablen, Verschachtelungen, Mixins und Importe. Insbesondere Importe sind nützlich, wenn Sie kleinere CSS-Dateien getrennt halten möchten, diese aber automatisch zu 1 kombinieren möchten (um mehrere langsame HTTP-Aufrufe zu vermeiden). Compass fügt eine große Anzahl vordefinierter Mixins hinzu, mit denen sich browserübergreifende Dinge leicht handhaben lassen. Es ist in Ruby geschrieben, kann aber problemlos mit jedem System verwendet werden.

Hier ist der beste Weg:

1. Erstellen Sie eine allgemeine CSS-Datei mit dem gesamten gemeinsam genutzten Code
2. Fügen Sie den gesamten spezifischen Seiten-CSS-Code in dieselbe Seite, in das Tag oder mit dem Attribut style = "" für jede Seite ein

Auf diese Weise haben Sie nur eine CSS mit dem gesamten freigegebenen Code und einer HTML-Seite. Übrigens (und ich weiß, dass dies nicht das richtige Thema ist) können Sie Ihre Bilder auch in base64 codieren (aber Sie können es auch mit Ihren js- und css-Dateien tun). Auf diese Weise reduzieren Sie noch mehr http-Anfragen auf 1.

SASS und LESS machen dies alles wirklich zu einem strittigen Punkt. Der Entwickler kann effektive Komponentendateien einrichten und beim Kompilieren alle kombinieren. 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.com http://lesscss.org

Am Ende ist eine einzelne minimierte CSS-Datei das, was Sie wollen, unabhängig von der Technik, die Sie verwenden. Weniger CSS, weniger HTTP-Anforderungen, weniger Anforderungen an den Server.

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

Ich diene meinem CSS als PHP-Datei mit dem MIME-Typ "text / css" im HTTP-Header. Auf diese Weise kann ich mehrere CSS-Dateien auf der Serverseite haben und PHP-Includes verwenden, um sie auf Anforderung des Benutzers in eine einzige Datei zu verschieben. Jeder moderne Browser empfängt die .php-Datei mit dem CSS-Code und verarbeitet sie als .css-Datei.

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

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

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


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

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

etc

Ich verwende Jammit , um mit meinen CSS-Dateien umzugehen und viele verschiedene Dateien für die Lesbarkeit zu verwenden. Jammit erledigt die ganze Drecksarbeit beim Kombinieren und Komprimieren 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.

Ein gebündeltes 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 sich möglicherweise nicht auf der Seite befinden, auf der Sie sich befinden, die der Browser jedoch noch berechnen muss.

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

Vorteile gebündelter Stylesheets: - Leistung beim Laden von Seiten

Nachteile gebündelter Stylesheets: - Langsameres Verhalten, das beim Scrollen, Interaktivität, Animation zu Abgehacktheit führen kann,

Fazit: Um beide Probleme zu lösen, besteht die ideale Lösung für die Produktion darin, das gesamte CSS in einer Datei zu bündeln, um bei http-Anforderungen zu speichern. Verwenden Sie jedoch Javascript, um aus dieser Datei das CSS für die Seite zu extrahieren, auf der Sie sich befinden, und aktualisieren Sie den Kopf damit .

Um zu wissen, welche gemeinsam genutzten Komponenten pro Seite benötigt werden, und um die Komplexität zu verringern, wäre es schön, alle auf dieser Seite verwendeten Komponenten deklariert zu haben - zum Beispiel:

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

Ich habe einen systematischen Ansatz für die CSS-Entwicklung entwickelt. Auf diese Weise kann ich einen Standard verwenden, der sich nie ändert. Zuerst habe ich mit dem 960-Rastersystem begonnen. Dann habe ich einzelne CSS-Zeilen für grundlegende Layouts, Ränder, Auffüllungen, Schriftarten und Größen erstellt. Ich reihe sie dann nach Bedarf aneinander. Auf diese Weise kann ich über alle meine Projekte hinweg 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 breit ist, bg0 Ränder von 10px Abstand von 5 verwendet, der Text weiß ist und schwebt links. Ich könnte dies leicht ändern, indem ich einen neuen - was ich einen "leichten" Stil nenne - entferne oder hinzufüge, anstatt eine einzelne Klasse mit all diesen Attributen zu erstellen. Ich kombiniere einfach die einzelnen Stile, während ich die Seite codiere. Dies ermöglicht es mir, eine beliebige Kombination von Stilen zu erstellen, ohne meine Kreativität einzuschränken oder eine große 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 ein schnelles Design als fantastisch erwiesen. 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 Seitengestaltungsattribute erstellt habe, ändere ich beim Erstellen eines neuen Projekts einfach meine Bilddatei. (Bg0 = Körperhintergrund gemäß meinem Benennungssystem) Das bedeutet, wenn ich zuvor ein Weiß hatte Hintergrund mit einem Projekt, das einfach in Schwarz geändert wird, bedeutet einfach, dass bg0 beim nächsten Projekt ein schwarzer Hintergrund oder ein anderes Bild ist .....