2012-05-24 118 views
19

Wahrscheinlich ist jedem erfahrenen Webentwickler dieses Problem bekannt: Mit der Zeit können Ihre CSS-Dateien ziemlich groß und unschön werden, weil alle Selektoren nicht mehr verwendet werden, was ziemlich schwierig zu finden ist. Ich arbeite an einem Rails-Projekt, bei dem wir dazu neigen, die Dinge ziemlich häufig neu zu gestalten, was zu einer Tonne von Mitnahme-CSS führt. Was ist der beste Weg, um es zu finden und zu entfernen?Unbenutztes CSS - wie reinigst du es?

Nun, ich weiß, dass es ein Schienen-Plugin namens Eigengewicht speziell für diesen Zweck gebaut hat. Allerdings ist hier mein Problem mit Mitnahmeeffekten: Zunächst einmal ignoriert es vollständig Selektoren in Javascript verwendet. Als Nächstes scannt es nur die Seiten, die Sie für das Scannen konfiguriert haben, was bedeutet, dass das Risiko besteht, dass etwas entfernt wird, das auf Seiten verwendet wird, die Sie aus irgendeinem Grund nicht gescannt haben. Schließlich findet es unbenutzte Selektoren nur in kompiliertem css (wir benutzen LESS) - ein Vergleich mit dem tatsächlichen Code ist etwas zu kompliziert.

Ich habe auch versucht http://unused-css.com/ - sie sind großartig, aber kann nicht auf localhost zugreifen und wiederum kann kompilierte CSS nur scannen.

Ich denke wirklich, dass es einen besseren Weg geben muss, dies zu tun. Eigentlich habe ich vor einiger Zeit beschlossen, eine bestimmte CSS-Datei zu optimieren, indem ich jeden Selektor im gesamten Projektverzeichnis übergreife (emacs + rinari-Modus mache es superleicht und superschnell), und jedes Mal habe ich weder html noch css gesehen In den Ergebnissen habe ich den Stil entfernt. Null Probleme, funktionierte wie ein Zauber. Offensichtlich werde ich das nicht für die gesamte Website tun. Ich glaube jedoch nicht, dass dies nicht automatisiert werden könnte. Jetzt, bevor ich meine Python anzünde und das aufschreibe, kann mir wirklich jemand sagen, ob ich das Rad neu erfinden würde?

+1

Haben Sie das jemals programmiert? Ich suche nach etwas ähnlichem. – Barney

+0

Nicht sicher, ob ich etwas verpasse, aber es spielt keine Rolle, wenn es kompiliertes CSS analysiert, ein unbenutzter Selektor ist ein unbenutzter Selektor, sei es LESS oder einfaches CSS. –

+0

Es ist schon eine Weile her ... Beendete Jobs, wechselte auf eine andere Plattform und musste sich aus einer Reihe von Gründen nie wieder mit diesem Problem auseinandersetzen. Also nie geschafft, das Skript zu schreiben :(sorry guys –

Antwort

12

Überprüfen Sie uCSS library von Opera Software.

Es hilft Ihnen, nicht verwendetes CSS zu finden, sowie CSS zu duplizieren. Außerdem erhalten Sie einen Überblick darüber, wie oft jede Regel in Ihrem Markup verwendet wurde. Mehrere Optionen sind verfügbar, indem Sie eine Konfigurationsdatei einrichten.

Update:

Eine weitere gute Alternative: csscss.

In Ruby geschrieben und unterstützt SASS, weniger.

Update:

Eine weitere gute Alternative: uncss.

Es funktioniert über mehrere Dateien und unterstützt Javascript-injected CSS.

+0

+1 das ist ein großartiges Werkzeug und die beste Lösung für dieses Problem, das ich bisher gesehen habe. – steveax

+0

Nicht genau das, was ich suchte, aber in der Tat die beste Lösung aus allem, was ich gesehen habe –

+0

csscss ist ein großartiges Werkzeug, aber afak findet nur redundante CSS, nicht unbenutzte CSS – Kyle

2

Dust Me Selecters und/oder CSS Usage Firefox-Erweiterungen können Ihnen helfen, unbenutzte CSS auszusortieren.

In den Chrome-Entwicklertools können Sie das Webseiten-Leistungstool verwenden, um nicht verwendete CSS-Regeln zu finden.

+2

Das ist gut, aber nicht perfekt: beide würden immer noch in der Lage sein, nur mit kompilierten CSS zu arbeiten, während ich ein Werkzeug bevorzugen würde, die durch LESS-Dateien gehen und den Job tun können –

+0

Interessant.Ich bin mir nicht bewusst, dass irgendetwas zurückverfolgt werden könnte ... Vielleicht sind Sie auf etwas. Man könnte potentiell die vorhandenen Werkzeuge verwenden, um unbenutztes CSS zu entdecken und dann von dort aus den relevanten LESS/SASS zu berechnen. Wenn Sie sich dafür entscheiden, dies zu einem Projekt zu machen, fügen Sie mich auf GitHub hinzu. – TomDunning

Verwandte Themen