it-swarm.com.de

Wie gehe ich bei nicht verwendeten CSS-Problemen vor?

Ich führe einige Speedtests in einem Blog durch und bekomme immer Beschwerden über nicht verwendetes CSS. Dies ist jedoch kein CSS, das ich nie verwende, sondern es wird nur auf dieser bestimmten Seite nicht verwendet.

Jetzt arbeite ich strukturiert, aber die Datei muss noch CSS enthalten, das nicht verwendet wird, da Sie es auf einer anderen Seite benötigen.

Ich denke nicht, dass die Verwendung verschiedener CSS-Dateien auf verschiedenen Seiten der richtige Weg ist. Ich denke, Sie sind viel besser dran, nur eine große Datei zu erstellen, die zwischengespeichert werden kann.

Jetzt gibt es eine elegante Art, damit umzugehen, oder bleiben Sie einfach dabei.

10
Saif Bechan

Ihre Behauptung, dass Sie mit einer größeren CSS-Datei besser dran sind, ist richtig. Es wird wahrscheinlich nur ein paar KB groß sein, wenn es komprimiert wird, und es sollte zwischengespeichert werden, also kein riesiger Overhead. Es gibt jedoch ein paar Dinge, die es wert sind, überprüft zu werden.

Wenn CSS immer nur auf einer Seite verwendet wird, ist es in diesem Fall möglicherweise besser, das CSS in einigen Style-Tags auf der Seite zu platzieren. (Hinweis: Dies kann die Pflege erschweren, insbesondere wenn Sie später einen ähnlichen Stil an einer anderen Stelle verwenden.)

Wenn Sie Ihre beliebtesten Seiten verwenden (zum Beispiel die Seiten, die mehr als 50% Ihrer Seitenaufrufe ausmachen) und feststellen, dass auf diesen Seiten nur ein sehr geringer Teil Ihres CSS-Codes verwendet wird, kann das Aufteilen für Benutzer schneller sein zwei CSS-Dateien. Jetzt müssen neue Benutzer, die Ihre beliebtesten Seiten besuchen, viel weniger herunterladen. Auf anderen Seiten gibt es eine zusätzliche HTTP-Anfrage, aber das ist keine große Sache.

Stellen Sie sicher, dass Ihr CSS gut optimiert ist. Vermeiden Sie nach Möglichkeit absteigende Selektoren. Wenn die rechte Seite eines Selektors zu allgemein ist, kann dies die Renderzeit verlangsamen. Zum Beispiel ist .class div {} etwas langsam, da der Browser jedes <div> -Element auf der Seite überprüfen muss und dann den DOM-Baum ganz oben nachschlagen muss, um ein Element mit der Klasse zu finden (oder nicht) .

7
DisgruntledGoat

Ich denke, das ist ein Manko des Speedtest-Tools, das Sie verwenden, dass es nicht die gesamte Site betrachtet und feststellt, welches CSS überhaupt nicht verwendet wird. Wenn Sie ein geeignetes Tool finden, lassen Sie es uns wissen!

Ich denke, Sie sind viel besser dran, wenn Sie nur eine große Datei erstellen, die zwischengespeichert werden kann.

Ja, das ist sinnvoll, es sei denn, es gibt eine Reihe von Seiten, für die ein zusätzliches CSS erforderlich ist. In diesem Fall können Sie es in diese Seiten einfügen.

5
paulmorriss

Die optimierteste und skalierbarste Art, wie ich mir vorstellen kann, damit umzugehen, besteht aus:

  1. Erstellen einer Haupt-CSS-Datei für alles, was sich auf den "globalen Bereich" bezieht (wie das Design der Site, globale Klassen, Bibliotheken, Plugins usw.) .

  2. Erstellen eines Systems mit einem Ordner, der eine eindeutige CSS-Datei pro Seite enthält (nur bei Bedarf). Diese Dateien haben möglicherweise denselben Dateinamen wie die Seite, mit der sie verknüpft sind. Sie können also auf jeder Seite, die nach einer CSS-Datei in diesem Ordner sucht, ein serverseitiges Skript ausführen und diese auf der Seite hinzufügen, sofern es eine gibt.

  3. Möglicherweise erstellen Sie unterschiedliche CSS-Dateien für browserspezifische Inhalte , die Sie nur laden, wenn der Besucher den entsprechenden Browser hat.

Auf diese Weise erhalten Sie eine solide und optimierte Methode zur Trennung Ihres CSS. Ja, es gibt noch nicht verwendete Regeln in der Hauptdatei, aber sie befinden sich in logischer Hinsicht dort, wo sie sein sollen.

Denken Sie auch daran, dass diese 3 "Ebenen" von CSS-Dateien wie eine einzelne CSS-Datei zwischengespeichert werden.

1
WiMantis

Es gibt ein praktisches kleines Firefox-Plug-In namens Dust-Me Selectors , das Ihr CSS überprüft und alle nicht verwendeten Regeln meldet. Es funktioniert jedoch nicht mit der neuesten Version von Firefox (v8.0), was etwas schade ist.

P .: Wenn ich Sie wäre, würde ich CSS Lint mit einer Prise Salz einnehmen - es gibt eine Denkschule, die besagt, dass die „Empfehlungen“ pedantisch und einfach übertrieben sind. (Weitere Informationen finden Sie in Matt Wilcox 'überzeugendem Artikel " CSS Lint is dangerous " ). Bestenfalls ist es völlig inoffiziell… und, seien wir ehrlich, brauchen wir wirklich noch ein Tool/Pseudo-Standard, um zu befriedigen?

1
Jordan Clark