Best Practices Magento CSS -Dateien

Question

Ich habe ein paar Fragen zu den CSS -Dateien, die mit Magento geliefert werden, und die Best Practices, um Änderungen in ihnen vorzunehmen.

Zunächst konnte ich keine grundlegende Beschreibung für alle CSS -Dateien finden, die mit Magento geliefert wurden. Wann wird beispielsweise die Datei reset.css verwendet?

Aber meine größere Frage ist, warum Magento standardmäßig fast alles in den Stilen macht. Wäre es nicht eine bessere Idee, das CSS in mehrere kleinere Dateien aufzuteilen und diese in der lokalen.xml -Datei für die verschiedenen Ansichten zu laden? Dies ermöglicht mehr Kontrolle über das Styling der Elemente.

Zum Beispiel könnte man eine CSS -Datei für einfache Produktansichten erstellen und die Datei in Local.xml und eine andere für gruppierte Produkte laden.

Eine andere Frage, die ich habe, ist, dass die -moz-* Stile. Warum befinden sie sich in den stiles.css und nicht in einer Firefox -spezifischen CSS -Datei? Wenn ich Opera (oder einen anderen Browser) verwende, zeigen sie diese Stile als Fehler, weil sie nichts über sie wissen.

Answer 1

Aber meine größere Frage ist, warum Magento standardmäßig fast alles in den Stilen macht. Wäre es nicht eine bessere Idee, das CSS in mehrere kleinere Dateien aufzuteilen und diese in der lokalen.xml -Datei für die verschiedenen Ansichten zu laden? Dies ermöglicht mehr Kontrolle über das Styling der Elemente.

Nein, es wäre nicht besser. Separate CSS -Dateien würden zu mehr HTTP -Anfragen führen, die Ihre Website verlangsamen würden. Ich glaube, Sie haben hier 2 Optionen:

1) Bleiben Sie aber bei 1 Big CSS -Datei, aber minimieren Sie es

2) Teilen Sie sie in mehreren kleineren Dateien auf, um die Lesbarkeit für sich selbst zu erhöhen, und lassen Sie sie automatisch mit der Verwendung kombiniert Fooman Speedster Magento Extension.

Eine andere Frage, die ich habe, ist, dass die -moz-* Stile. Warum befinden sie sich in den stiles.css und nicht in einer Firefox -spezifischen CSS -Datei? Wenn ich Opera (oder einen anderen Browser) verwende, zeigen sie diese Stile als Fehler, weil sie nichts über sie wissen.

AFAIK Es gilt als allgemeine Praxis, es so zu tun. Es gibt mehr Nachteile beim Schreiben jedes browserspezifischen Stils in separater Datei.

Fügen Sie es zum Beispiel einfach so für abgerundete Ecken hinzu:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

Je nachdem, welchen Browser der Besucher den entsprechenden Stil verwendet, wird angewendet. Browser, die diese Eigenschaften nicht unterstützen, zeigen Ihnen nur quadratische Ecken.

Answer 2

Sie müssen sich das von beiden Seiten ansehen.

• Der Browser, heruntergeladen und rendert den Inhalt
• Der Entwickler schreibt/bearbeitet/verwaltet CSS

Ein Browser möchte so wenige Dateien, wie dies erforderlich, kombiniert und abgebrochen wird. Es ist nicht nur idealerweise so wenig und so einfache CSS wie möglich (dh keine 1+ Ebenen hierarchischer Abhängigkeit).

Ein Entwickler kann jedoch Schwierigkeiten haben, alles in einem Dokument zu verwalten oder es weniger produktiv zu finden, so zu arbeiten.

Dies ist wirklich der Grund, warum CSS -Verarbeitung (z. B. Sass/Weniger) existiert. Damit Sie CSS unkompliziert, sauber und kommentiert haben können, so wie Sie möchten, aber was der Browser erhält, ist eine kombinierte Datei und eine optimierte Datei. Das gibt Ihnen also das Beste aus beiden Welten.

Realistisch gesehen benötigen Sie nur 2 Style -Blätter (Druck und Bildschirm) - obwohl neuere Browser dies einfach über Medienabfragen tun können.

Was den CSS -Input betrifft, tun Sie alles, was die Entwicklung für Sie am wohlsten macht. In Bezug auf die Ausgabe versuchen Sie jedoch sicherzustellen, dass Sie so wenige Dateien haben, optimiert und enttäuscht wie möglich.