So identifizieren Sie nicht verwendete CSS-Definitionen [geschlossen]

413

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.

jswanson
quelle
67
Warum ist geschlossen als nicht konstruktiv?
George Chalhoub
12
@albert Kommentar Stimmen zeigen, dass Sie Recht haben und so ist die Mäßigung außer Kontrolle geraten. Die Leute sollten einige Zeit damit
Stijn de Witt
6
@StijndeWitt Ich stimme zu. Es ist in vielerlei Hinsicht giftig. Es ist auch lebendig und gut auf Open Source se und Dokumentation se. bringt mich dazu, hier etwas anderes zu tun, als zu helfen.
Albert
3
@albert Obwohl ich damit einverstanden bin, dass der aufgeführte nahe Grund dumm ist, ist imo die von Ian Robinson verlinkte doppelte Frage überlegen (daher werde ich nicht für eine Wiedereröffnung stimmen).
Brilliand

Antworten:

145

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

David Medinets
quelle
14
Die Erweiterung funktioniert nicht in Firefox 4
mvark
5
Dieses Update ist noch nie aufgetaucht und nach einer Anfrage in den SitePoint-Foren scheint das Plugin so gut wie tot zu sein.
Mike B
3
Es sieht so aus, als hätte der Autor kürzlich eine aktualisierte Version auf seiner eigenen Website veröffentlicht, sogar eine Version für Opera. Schauen Sie sich Brothercake.com
Funka
2
Funktioniert leider nicht mehr
Jonathan
4
Ich habe einen Ersatz geschrieben, mehrere Seiten auf Ihrer Website gecrawlt
Alex
259

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

Geben Sie hier die Bildbeschreibung ein

Derek Adair
quelle
64
Das ist großartig, aber schade, dass Sie es nicht auf einer Gruppe von Seiten ausführen können (andernfalls könnten nicht verwendete CSS-Regeln unvermeidlich sein)
Damon
17
Ich führe das Auditing-Tool aus und es zeigt mir das nicht verwendete CSS, aber wie verwende ich es dann? Muss ich jedes Element manuell durchsuchen und entfernen?
Timothée HENRY
19
Es ist nur die aktuelle Seite. Es heißt "2445 Regeln (83%) von CSS werden von der aktuellen Seite nicht verwendet", also nicht wirklich hilfreich.
Chhantyal
8
Wenn Sie das Element erweitern, erhalten Sie eine Liste der tatsächlich nicht verwendeten Regeln. Dies ist jedoch nicht hilfreich auf Websites, auf denen Sie DOM im laufenden Betrieb ändern.
Howie
10
Eigentlich wurde dies gerade in die Abdeckung verschoben - gehen Sie zu Audits -> neben Konsole unten befindet sich ein Menü (Menü mit 3 vertikalen Punkten) und Sie können dort die Abdeckung auswählen. Klicken Sie einfach auf Aufzeichnen und navigieren Sie.
Graham Ritchie
65

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.

megaSteve4
quelle
5
Nur ein Hinweis, dass Sie mit unused-css.com das CSS nicht herunterladen können, ohne dass Sie ein bezahltes Mitglied sind. Der niedrigste Plan beginnt bei 29 US-Dollar pro Monat! scheint mir ein bisschen teuer für den Service
Georgiecasey
1
Ich würde purifycss github.com/purifycss/purifycss zur Mischung hinzufügen . Es ist kostenlos, sehr beliebt (laut Stars in Github) und funktioniert mit einseitigen Apps.
Dmitry Gonchar
21

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.

Salman A.
quelle
8

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.

mjc
quelle
7

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.

Somnath Muluk
quelle
6

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

Josh
quelle
Der Autor hat eine neue Version vor wenigen Wochen auf seiner Website unter www.brothercake.com
Funka
Dieses Plugin ist nicht mehr verfügbar und der Link zum Herunterladen ist auf Brothercake ist tot
Andrea Mauro
3

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.

Jitendra Vyas
quelle