it-swarm.com.de

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 aufbewahren?

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.

19
CamSpy

Ich denke, es hängt wirklich davon ab, was Sie für die Entwicklung am einfachsten finden und was Ihnen dabei hilft, ein ordentliches 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: https://stackoverflow.com/questions/16657159/when-using-media-queries) -lädt-per-Telefon-nicht-relevante-Abfragen-und-Bilder

16
Richard B

Es hängt ein wenig davon ab, was Sie erreichen möchten: Versuchen Sie, das Laden Ihrer Seite zu beschleunigen oder 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 Sie so einen Überblick über alle von Ihnen deklarierten Stile erhalten.

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, Klassen zusammenzuführen, die sehr ähnlich sind:

.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 <span class="bold italic">foo bar</span> ändern müssen.

Ich kann nur empfehlen, dass Sie sich Bootstrap ( http://getbootstrap.com ) ansehen. Klassen'.

Ich hoffe das hilft.

4
royarisse

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. Um dies zu tun, ist es nicht ausreichend, das Stylesheet zu teilen und mehrere <link>- Tags mit unterschiedlichen Medienattributen einzufügen. Browser scheinen alle <link> Stylesheets unabhängig vom Medium zu laden Anfragen (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.

4
Jost

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.

3
jsninja

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.

2
Algy Taylor

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

//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.