2009-07-13 12 views
4

Wir haben mehrere massive CSS-Dateien, die über die Jahre immer weiter anwuchsen, wenn neue Elemente zu unserem System hinzugefügt wurden, sowie JSP-Seiten (die weitere JSP-Seiten enthalten), die auf diese Dateien verweisen.CSS-Regelbereinigungstool

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

Neue Tools kommen immer raus. Gibt es ein Tool, das (neben offensichtlichen wie dem CSS-Validator von Aptana und W3C) ein Verzeichnis analysieren und dabei helfen kann, CSS-Regeln zu bereinigen und zu optimieren?

+0

Jedermann verwendet CSS Redundanz Checker? Gibt es ähnliche Tools? –

Antwort

3

Es ist eine schwierige Aufgabe ... vor allem, wenn Ihr HTML-DOM-Inhalt in irgendeiner Weise generiert wird.

Das Dust-Me-Selectors-Plugin ist hilfreich, aber Seite für Seite werden viele Selektoren nicht verwendet ... aber nicht ungültig.

Es gibt ein paar Tricks, die ich benutzt habe, um sauber zu machen.

Fügen Sie nach und nach einige HORRID-Stile ein, die Sie sofort erkennen können, um festzustellen, ob ein Selektor verwendet wird. z.B.

Alles, was mit einem riesigen gestrichelten Pink Rand jetzt rendert ... ist ein "aktiver" Selektor. Wenn Sie die meisten Ihrer Website/App surfen können, ohne sie zu sehen, ist es wahrscheinlich "tot".

(wenn Ihr CSS-Code „erzeugt“ wird, können Sie optimieren diese sofort mit verschiedenen Farben zu testen und verwenden, um Inhalte erzeugt, um die „id“ des Wählers vorangestellt wird)

Eine weitere Option, wenn Sie eine generierte verwenden CSS-System ... ist das Hinzufügen einer endgültigen Eigenschaft zu Ihrem Selektor, die sagt ... ein Hintergrundbild mit einer generierten URL setzt. 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, dann Ihre Log-Web-Check für HTTP Bildanfragen ... für jede erzeugte Bild-URL, die nicht im Protokoll angefordert wurde ... Sie haben wahrscheinlich einen "toten" Selektor gefunden.

+1

Ich stelle mir vor, dass der Autor auf der Suche nach automatisierten Tools statt nach manuellen Lösungen war. – montrealist

+0

Dust-Me-Selectors enthält ein laufendes Aggregat nicht verwendeter Selektoren, aber Sie müssen jede Seite bearbeiten. Wenn Ihre Site über eine SiteMap verfügt, können Sie diese verwenden, um Ihre gesamte Site zu crawlen. – mxmissile

+0

@dalbaeb - einverstanden, es ist nur ein härteres "Puzzle" zu lösen, als viele Leute erwarten. ;-) @mxmissile - hmm, wusste nicht, dass es ein laufendes Aggregat hat - ich muss es nochmal besuchen. – scunliffe

4

Es gibt Dust-Me-Selectors Plugin für Firefox, obwohl es über eine Seite im Browser gerendert wird, natürlich nicht durch ein Verzeichnis.

2

Selenium können Sie Seitentests automatisieren und Elemente über CSS-Selektoren auswählen. Wenn Sie die Übereinstimmungen auf der Website akkumulieren, können Sie nicht übereinstimmende Elemente identifizieren.