Sollte ich eine große CSS-Medienabfragedatei für jede Bildschirmgröße in separate Dateien aufteilen?

19

Ich arbeite an einer Responsive Design-Website, um Inhalte für alle Bildschirmgrößen bereitzustellen. Ich habe Medienabfragen für 5 verschiedene "Schritte" und die CSS-Datei ist ungefähr 30 KB groß.

Wäre es besser, dies in separate Dateien aufzuteilen und sie so zu gestalten:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

oder sollte ich sie in einer CSS-Datei behalten?

Update: Ich wollte nur hinzufügen, dass mein Hauptanliegen das Öffnen / Rendern von Seiten über Browser / Geräte hinweg und nicht die einfache Entwicklung war.

CamSpy
quelle
Kann grunt / webpack / welches Plugin auch immer vorhanden sein, um eine einzelne CSS-Datei in mehrere Dateien aufzuteilen, die durch eine Medienabfrage voneinander getrennt sind? Dann könnten Sie mit Sicherheit die einfache Entwicklung einer Monolith-Datei und die Geschwindigkeitsoptimierung einzelner Dateien erreichen.
Kevin Wheeler

Antworten:

16

Ich denke, es hängt wirklich davon ab, was Sie für die Entwicklung am einfachsten finden und was Ihnen dabei hilft, ein aufgeräumtes Stylesheet zu führen.

Der einzige wirkliche Nachteil, den ich mir beim Teilen vorstellen kann, ist, dass Sie, sollte das Attribut eines Elements in all Ihren Stylesheets erscheinen, 5 separate Dateien aktualisieren müssen, um es zu ändern (anstatt nebeneinander an einer Stelle zu erscheinen).

Laut der Antwort in diesem Beitrag werden alle Stylesheets vom Browser heruntergeladen, sodass die Aufteilung der Auflösung keine Bandbreitenersparnis bedeutet: /programming/16657159/when-using-media-queries-does-a -telefon-laden-nicht-relevante-abfragen-und-bilder

Richard B
quelle
Wissen Sie in dem von Ihnen verlinkten Beitrag, was er unter "Dies ist eine Einschränkung der CSSOM" versteht?
DisgruntledGoat
1
Das CSS-Objektmodell - dev.w3.org/csswg/cssom - Ich glaube, dies definiert, wie mit CSS umgegangen werden soll, und ich denke, dass die Einschränkung, auf die er sich bezieht, darin besteht, kein Modell zu haben, das solche Stile bandbreitenschonender handhabt Weg.
Richard B
3
Es ist zwar kein Download-Sparer, aber in gewisser Weise. Ein Browser priorisiert Verknüpfungen mit übereinstimmenden Medienabfragen gegenüber nicht übereinstimmenden. Eine übereinstimmende CSS-Datei blockiert die Seitenwiedergabe, während eine nicht übereinstimmende Datei vom Browser für den Download eine niedrigere Priorität erhält und die Seitenwiedergabe überhaupt nicht blockiert. Sobald es aufgeteilt ist, können Sie mit js bedingt herunterladen, wenn Sie speichern und Bandbreite möchten.
Dalore
4

Es hängt ein wenig davon ab, was Sie erreichen möchten: Versuchen Sie, Ihre Seite schneller zu laden, oder versuchen Sie, die Entwicklung zu vereinfachen?

Wenn Sie auf Letzteres zielen, können Sie mehrere Blätter verwenden, aber das ist alles eine Frage der Präferenz. Ich finde es am einfachsten, eine große Datei zu verwenden, da dies Ihnen einen Überblick über alle Stile gibt, die Sie deklariert haben.

Wenn Sie eine Seite schneller als am besten laden möchten, sollten Sie die Anzahl der Anfragen minimieren, da der Aufwand für Anfragen ziemlich hoch ist. Außerdem können Sie eine Entwicklungsversion für sich behalten und ein minimiertes CSS für das Web bereitstellen (ich finde YUI eine gute Methode: http://www.refresh-sf.com/yui/ ).

Weiterhin würde ich versuchen, das CSS selbst zu optimieren. Sie können beispielsweise versuchen, sehr ähnliche Klassen zusammenzuführen:

.bold-and-italic { font-weight: bold; text-style: italic; }

Kann umgewandelt werden in:

.bold { font-weight: bold; }
.italic { text-style: italic; }

Das Einzige, was Sie tun müssen, ist, dass Sie den HTML-Code leicht von <span class="bold-and-italic">foo bar</span>in ändern müssen<span class="bold italic">foo bar</span>

Ich kann Ihnen nur empfehlen, einen Blick auf Bootstrap ( http://getbootstrap.com ) zu werfen. Diese Jungs haben großartige Arbeit geleistet, wenn es darum ging, Klassen in mehrere "Unterklassen" aufzuteilen .

Ich hoffe das hilft.

Royarisse
quelle
1
Klassen, die nach dem Stil benannt sind, haben eine schlechte Form. Könnte auch einfach ein Stilattribut einfügen, wenn Sie dazu gehen. Besser die Klassen logisch zu nennen. Like.important
Dalore
4

Es ist wahrscheinlich am besten, nur eine CSS-Datei zu haben, diese aber zu verkleinern und zu komprimieren. Vorausgesetzt, Ihre 30 KB sind vorher vorhanden, werden Sie wahrscheinlich die Dateigröße mit Minimierung (Leerraumentfernung) und Gzipping auf etwa 5 KB reduzieren.

Wenn Sie sich aufteilen, werden Sie wahrscheinlich schneller, aber nur unter bestimmten Bedingungen.

  • Sie müssten sicherstellen, dass jeweils nur ein Stylesheet geladen wird - andernfalls würden Sie zwei oder mehr HTTP-Anforderungen benötigen, die selbst einen Overhead haben, der den Gewinn aus der kleineren Dateigröße zumindest teilweise zunichte machen würde. Dazu reicht es nicht aus, nur das Stylesheet zu teilen und mehrere <link>-Tags mit unterschiedlichen <link>Medienattributen einzufügen. Browser scheinen unabhängig von den Medienabfragen alle bearbeiteten Stylesheets zu laden (danke an @cimmanon für diese Info, wusste das nicht). .
  • Die Anzahl der zwischen den Stylesheets geteilten CSS-Regeln muss gering sein. Andernfalls müsste jedes der mehreren Stylesheets alle gängigen Regeln enthalten und hätte somit fast die Größe des Originals.
  • Sie verwenden einen CSS-Präprozessor (oder etwas Ähnliches), sodass es möglich ist, dieselben Codeteile in 5 Stylesheets zu haben.

Außerdem: Nicht vorzeitig optimieren. Tun Sie dies nur, wenn Sie Leistungsprobleme haben.

Jost
quelle
3
Wenn Sie das <link rel="stylesheet" />Tag für alle Ihre Medienabfragedateien verwenden, können Sie den Browser nicht daran hindern, sie herunterzuladen. Sie müssten Browser-Sniffing auf der Serverseite oder JavaScript verwenden, um die Ansichtsfenster-Dimensionen zu untersuchen und die entsprechenden Stylesheets einzufügen. Beides ist keine gute Wahl.
Cimmanon
1
Ich bin ein bisschen überrascht, aber Sie haben Recht - ich dachte, das Hinzufügen des <link>Medienattributs zum -Tag hätte das Laden nicht übereinstimmender Stylesheets verhindert. Warum machen Browser das? Dies ist natürlich der wichtigste Grund, die Stylesheets nicht zu teilen.
Jost
Sie tun dies, weil sich Ihr Bildschirm ändern kann. Wenn Sie auf einem Mobiltelefon arbeiten und ihn vom Hoch- zum Querformat drehen, ändert sich plötzlich Ihre Bildschirmbreite. Auf dem Desktop können Sie auch die Größe Ihres Browserfensters ändern oder Ihr Fenster auf einen anderen Bildschirm ziehen, wenn Sie mehrere Monitore einrichten. Wenn der Browser nicht alle CSS-Assets im Voraus heruntergeladen hätte, würde es zu einer Verzögerung beim erneuten Rendern der Seite kommen, wenn eine der oben genannten Aktionen auftritt
MrCarrot,
Es ist besser, sie zu spalten. Die meisten Browser sind heutzutage Spdy-Browser (Ihre Site ist https und spdy genau so, wie es sein sollte) und mit spdy werden mehrere Verbindungen in dieselbe Verbindung gemultiplext, sodass die Anzahl der Dateien jetzt keine Rolle spielt. Auch Browser stellen nicht übereinstimmende CSS-Dateien für Medienabfragen mit einer niedrigeren Priorität zum Herunterladen bereit und blockieren, was noch wichtiger ist, das Rendern der Seite nicht.
Dalore
3

Sie sollten Ihre CSS-Dateien basierend auf Medienabfragen aufteilen, da CSS-Dateien gerendert werden und blockieren.

Wenn der Browser Ihr DOM erstellt, muss er zuerst warten und alle Ihre CSS-Dateien laden. Sie reduzieren die Ladezeit Ihrer Seite, wenn einige Ihrer CSS-Dateien nur aufgrund bestimmter Medienabfragen geladen werden.

Dies gilt auch für das Hinzufügen von Async zu einem JavaScript-Skript-Tag. Bsp .: <script src='myfile.js' async></script>.

Das DOM muss nicht darauf warten, dass Ihre JS-Datei geladen wird. Fügen Sie async nur hinzu, wenn für die Erstellung Ihres DOM bei Onload kein JavaScript erforderlich ist.

jsninja
quelle
Ich habe gehört, dass behauptet wird, wenn Sie wirklich nicht möchten, dass Ihre Async-Skripte möglicherweise das Rendern verzögern, führen Sie sie im window.onload-Ereignis aus, anstatt Async zu verwenden.
Kevin Wheeler
2

Ich würde das gerne sagen.

Bewahren Sie sie für die Produktion immer in einer Datei auf. Der Grund dafür ist, dass es für den Browser effizienter ist und dass dies Ihr Hauptinteresse (IMO) sein sollte, wenn Sie von der Entwicklung zur Produktion wechseln.

Die Entwicklung ist ein anderer Fischkessel. Ich neige dazu, Medienabfragen so aufzuteilen, dass sie von jedem Element stammen, zB:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Wie im Allgemeinen, wenn ich ein Element ändere, möchte ich nicht überall nach CSS suchen müssen (obwohl Sie so etwas wie grep ... verwenden können).

Aber eine Sache, die ich sagen würde, ist, dass es sich lohnt, die Site selbst, den Entwicklungsprozess und das Soforth zu betrachten. Wenn Sie wirklich der Meinung sind, dass es sich lohnt, sie in Dateien zu unterteilen, die auf der Bildschirmgröße basieren, probieren Sie es aus. Machen Sie eine Kopie der Site (wenn möglich), probieren Sie die Kopie aus - wenn es einfacher ist, verwenden Sie diese. Sie müssen kein einheitliches Paradigma für die Entwicklung einer Website befolgen.

Algy Taylor
quelle
1

Einfach: Verwenden Sie 1 Stylesheet und fügen Sie Kommentare hinzu, um das Auffinden und Ändern der CSS-Stile zu vereinfachen. Beispiel:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Wenn Sie möchten, können Sie mehrere Stylesheets verwenden und diese für jede bestimmte Größe aufrufen.

Regardt Ogies Myburgh
quelle
-1

Ich würde mir lieber Bootstrap anschauen . Es ist eine CSS-Datei, die das gesamte CSS enthält. Es funktioniert auf fast 99% der Browser und ist äußerst reaktionsschnell.

Klicken Sie auf die Live-Demo und vergrößern Sie sie ( Ctrl += Vergrößern, Ctrl -= Verkleinern, Ctrl 0= Normal) oder öffnen Sie sie auf Ihrem Handy, um zu sehen, wie sie wiedergegeben wird.

Regardt Ogies Myburgh
quelle
2
Er hat bereits 30 KB CSS geschrieben, wie kann ein Wechsel zu Bootstrap von Vorteil sein?
Steve Sanders
Ja, ich stimme zu, dass 30 KB CSS eine Mission ist, die es zu wiederholen gilt. Ich würde es einfach kopieren und in verschiedene Stylesheets einfügen, je nachdem, wie es strukturiert ist, könnten Sie die CSS-Dateien duplizieren und umbenennen und alle unnötigen Teile entfernen.
Regardt Ogies Myburgh