Vorgehensweise bei nicht verwendeten CSS-Problemen

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. Es wird nur nicht auf dieser bestimmten Seite 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, wenn Sie nur eine große Datei erstellen, die zwischengespeichert werden kann.

Gibt es jetzt eine elegante Möglichkeit, damit umzugehen, oder bleiben Sie einfach dabei?

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

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

Wenn Sie Ihre beliebtesten Seiten (z. B. die Seiten, die mehr als 50% Ihrer Seitenaufrufe ausmachen) verwenden und feststellen, dass nur eine sehr kleine Menge Ihres CSS auf diesen Seiten verwendet wird, kann es für Benutzer schneller sein, sie aufzuteilen 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. Dies .class div {}wäre beispielsweise etwas langsam, da der Browser jedes <div>Element auf der Seite überprüfen und dann den DOM-Baum ganz oben nachschlagen muss, um ein Element mit der Klasse zu finden (oder nicht).

Ich denke, dies ist ein Mangel des von Ihnen verwendeten Speedtest-Tools, das nicht die gesamte Site betrachtet und feststellt, welches CSS überhaupt nicht verwendet wird. Wenn Sie ein Tool finden, das dies tut, 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, die ein zusätzliches Stück CSS benötigen. In diesem Fall können Sie es in diese aufnehmen.

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.

PS: Wenn ich Sie wäre, würde ich CSS Lint mit einer Prise Salz nehmen - es gibt eine Denkschule, die besagt, dass ihre „Empfehlungen“ pedantisch sind und nur einen völligen Overkill darstellen. (Weitere Informationen finden Sie in Matt Wilcox 'überzeugendem Artikel „ CSS Lint ist schädlich “ ). Bestenfalls ist es völlig inoffiziell ... und, seien wir ehrlich , brauchen wir wirklich noch ein weiteres Tool / Pseudo-Standard, um zu befriedigen?

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

1. Erstellen einer CSS-Hauptdatei für alles, was sich auf den "globalen Bereich" bezieht (z. B. 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 können denselben Dateinamen wie die Seite haben, mit der sie verknüpft sind. Sie können also auf jeder Seite ein serverseitiges Skript ausführen, das nach einer CSS-Datei in diesem Ordner sucht, und sie der Seite hinzufügen, falls vorhanden.

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

Auf diese Weise erhalten Sie eine solide und optimierte Methode zur Trennung Ihres CSS. Ja, es werden immer noch nicht verwendete Regeln in der Hauptdatei vorhanden sein, aber sie werden dort sein, wo sie aus logischer Sicht sein sollen.

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