CSS -Regelreinigungswerkzeug

Question

Wir haben mehrere massive CSS -Dateien, die im Laufe der Jahre immer wieder wuchsen, wenn unser System sowie JSP -Seiten (die weitere JSP -Seiten enthalten, die auf diese Dateien verweisen, um neue Elemente hinzuzufügen.

Wir wissen, dass wir viele Regeln haben, die nicht mehr verwendet werden, und viele, die überflüssig sind.

Neue Tools kommen einfach weiter heraus. Gibt es ein Tool, das (abgesehen von offensichtlichen Personen wie Aptana und W3Cs CSS -Validator) ein Verzeichnis analysieren und bei der Reinigung und Optimierung von CSS -Regeln helfen kann?

Answer 1

Es ist eine knifflige Aufgabe ... insbesondere wenn Ihr HTML -DOM -Inhalt in irgendeiner Weise im laufenden Weg generiert wird.

Das Plugin für Dust-Me-Selectors ist hilfreich, aber auf Seite für Seiten werden viele Selektoren nicht genutzt ... aber nicht NECs sind ungültig.

Es gibt ein paar Tricks, die ich verwendet habe, um aufzuräumen.

Fügen Sie nacheinander ein schreckliches Styling ein, das Sie sofort erkennen können, um festzustellen, ob ein Selektor verwendet wird. z.B

border:6px dashed #ffaacc;
padding:12px;

Alles, was jetzt mit einem riesigen, geschlitzten, pinkfarbenen Grenze ist ... ist ein "aktiver" Selektor. Wenn Sie den größten Teil Ihrer Website/App surfen können, ohne sie zu sehen, ist es wahrscheinlich "tot".

(Wenn Ihr CSS -Code "generiert" ist, können Sie dies optimieren, um mit verschiedenen Farben gleichzeitig zu testen, und verwenden generierte Inhalte, um die "ID" des Selektors vorzubereiten.)

Eine weitere Option, wenn Sie ein generiertes CSS -System verwenden, besteht darin, Ihrem Selektor eine endgültige Eigenschaft hinzuzufügen, die lautet ... ein Hintergrundbild mit einer generierten URL. z.B

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Dann surfen Sie einfach Ihre Website/App für eine Weile auf Ihr Webprotokoll für HTTP -Bildanforderungen ... für jede generierte Bild -URL, die im Protokoll nicht angefordert wurde ... Sie haben wahrscheinlich einen "toten" Selektor gefunden.

Answer 2

Es gibt Dust-Me-Selektoren Plugin für Firefox, obwohl es natürlich eine Seite im Browser durchläuft, nicht durch ein Verzeichnis.

Answer 3

Selen Ermöglicht das automatisierende Seitentests und wählen Sie Elemente über CSS -Selektoren aus. Wenn Sie die Übereinstimmungen auf der Website sammeln, können Sie nicht übereinstimmende Elemente identifizieren.