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

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.

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

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.

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.

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.

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.

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.

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.