Gibt es gute Ansätze, um nicht verwendete CSS-Definitionen in einem Projekt zu identifizieren? Ein paar CSS-Dateien wurden eingezogen und jetzt versuche ich, die Dinge ein bisschen aufzuräumen.

Schauen Sie sich die Firefox-Erweiterung Dust-Me unter https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ an .

Die Chrome Developer Tools verfügen über eine Registerkarte " Audits", auf der nicht verwendete CSS-Selektoren angezeigt werden können.

Führen Sie eine Prüfung, dann unter Web - Seite Leistung siehe Entfernen von nicht verwendeten CSS - Regeln

Ich habe gerade diese Seite gefunden - http://unused-css.com/

Sieht gut aus, aber ich müsste das ausgegebene "saubere" CSS gründlich überprüfen, bevor ich es auf eine meiner Websites hochlade.

Ebenso wie bei all diesen Tools müsste ich überprüfen, ob keine IDs und Klassen ohne Stil entfernt wurden, sondern als JavaScript-Selektoren verwendet werden.

Der folgende Inhalt stammt von http://unused-css.com/. Wir danken ihnen daher für die Empfehlung anderer Lösungen:

Latish Sehgal hat eine Windows-Anwendung geschrieben, um nicht verwendete CSS-Klassen zu finden und zu entfernen. Ich habe es nicht getestet, aber anhand der Beschreibung müssen Sie den Pfad Ihrer HTML-Dateien und eine CSS-Datei angeben. Das Programm listet dann die nicht verwendeten CSS-Selektoren auf. Aus dem Screenshot geht hervor, dass es keine Möglichkeit gibt, diese Liste zu exportieren oder eine neue saubere CSS-Datei herunterzuladen. Es sieht auch so aus, als ob der Dienst auf eine CSS-Datei beschränkt ist. Wenn Sie mehrere Dateien bereinigen möchten, müssen Sie diese nacheinander bereinigen.

Dust-Me Selectors ist eine Firefox-Erweiterung (für Version 1.5 oder höher), die nicht verwendete CSS-Selektoren findet. Es extrahiert alle Selektoren aus allen Stylesheets auf der angezeigten Seite und analysiert dann diese Seite, um festzustellen, welche dieser Selektoren nicht verwendet werden. Die Daten werden dann gespeichert, sodass beim Testen nachfolgender Seiten Selektoren von der Liste gestrichen werden können, sobald sie angetroffen werden. Dieses Tool soll in der Lage sein, eine ganze Website zu spinnen, aber ich könnte es leider zum Laufen bringen. Ich glaube auch nicht, dass Sie die CSS-Datei mit entfernten Stilen konfigurieren und herunterladen können.

Topstyle ist eine Windows-Anwendung mit einer Reihe von Tools zum Bearbeiten von CSS. Ich habe es nicht viel getestet, aber es sieht so aus, als ob es die Fähigkeit hat, nicht verwendete CSS-Selektoren zu entfernen. Diese Software kostet 80 USD.

Liquidcity CSS Cleaner ist ein PHP-Skript, das reguläre Ausdrücke verwendet, um die Stile einer Seite zu überprüfen. Hier erfahren Sie, welche Klassen im HTML-Code nicht verfügbar sind. Ich habe diese Lösung nicht getestet.

Deadweight ist ein CSS-Coverage-Tool. Anhand einer Reihe von Stylesheets und einer Reihe von URLs wird festgelegt, welche Selektoren tatsächlich verwendet werden, und Listen, die "sicher" gelöscht werden können. Dieses Tool ist ein Ruby-Modul und funktioniert nur mit der Rails-Website. Die nicht verwendeten Selektoren müssen manuell aus der CSS-Datei entfernt werden.

Helium CSS ist ein Javascript-Tool zum Erkennen von nicht verwendetem CSS auf vielen Seiten einer Website. Sie müssen zuerst die Javascript-Datei auf der Seite installieren, die Sie testen möchten. Dann müssen Sie eine Heliumfunktion aufrufen, um die Reinigung zu starten.

UnusedCSS.com ist eine Webanwendung mit einer benutzerfreundlichen Oberfläche. Geben Sie die URL einer Site ein und Sie erhalten eine Liste der CSS-Selektoren. Für jeden Selektor gibt eine Zahl an, wie oft ein Selektor verwendet wird. Dieser Service weist einige Einschränkungen auf. Die @ import-Anweisung wird nicht unterstützt. Sie können die neue saubere CSS-Datei nicht konfigurieren und herunterladen.

CSSESS ist ein Lesezeichen, mit dem Sie nicht verwendete CSS-Selektoren auf jeder Site finden können. Dieses Tool ist recht einfach zu bedienen, aber Sie können keine sauberen CSS-Dateien konfigurieren und herunterladen. Es werden nur nicht verwendete CSS-Dateien aufgelistet.

Google Page Speed kann das für Sie tun (es kann viel mehr als nur sagen, welches CSS nicht verwendet wird). Unter FireFox ist es als FireBug-Add-On verfügbar. Dann gibt es noch eine Online-Version.

Ein besserer CSS-Minifier in C # gibt redundante Stile aus.

Sie möchten auch Dust-Me damit verwenden.

Denken Sie daran, wenn es Inhalte gibt, die für Dust-Me derzeit nicht sichtbar sind, können Sie die benötigten Stile wegwerfen.

BEARBEITEN: Link war defekt, aber archive.org hat sowohl die Seite als auch den Code.

CSS-Nutzung

Firebug-Erweiterung, um anzuzeigen, welche CSS-Regeln tatsächlich verwendet werden.

CSS Usage ist eine Erweiterung für Firebug (daher muss Firebug installiert sein), mit der Sie nicht verwendete CSS-Stilregeln kennen. Es identifiziert das CSS, das Sie verwenden und nicht verwenden. Sie können darauf hinweisen, welche unnötigen Teile entfernt werden können. Sie sollten dieses Add-On auf jeden Fall verwenden, um Ihre CSS-Dateien so leicht wie möglich zu halten.

Es sieht so aus, als hätte jemand DustMe Selectors aktualisiert, um wieder mit Firefox unter einem neuen Namen zu arbeiten - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198

Verwenden der Internet Explorer Developer Toolbar , s Ansicht> CSS-Auswahlübereinstimmungen : Zeigen Sie einen Bericht aller festgelegten Stilregeln an und wie oft sie auf der aktuellen Seite verwendet werden.

Schauen Sie sich Googles PageSpeed ​​für Firefox an . Es macht das und eine ganze Menge mehr.

Anscheinend ist auch ein Chrome-Plugin in der Entwicklung.