Refactoring großer / alter CSS-Dateien


13

Ich arbeite derzeit an einer 100.000-seitigen Website. Das aktuelle Design ist seit über 5 Jahren in Kraft und sukzessive Aktualisierungen haben zu mehr als 12.000 Zeilen CSS-Dateien geführt.

Offensichtlich ist das CSS unhandlich geworden, viele der Stile sind dupliziert und es ist fast unmöglich zu wissen, wie viele der Stile tatsächlich verwendet werden.

Wir können uns verkleinern, aber das ist keine wirkliche Lösung für das Problem, sondern verzögert nur die unvermeidliche Überarbeitung.

Es gibt also drei Fragen, für die es Tools gibt ...

  • Große CSS-Dateien de-duplizieren?
  • die Site scannen und die Verwendung von CSS-Klassen und IDs protokollieren?
  • Könnte ein solches Scannen mit einem Skript wie greasemonkey erreicht werden?

Antworten:


17

http://unused-css.com/ Erledigt einige Ihrer Fragen und sie haben Folgendes zu sagen:

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 wäre der Service auf eine CSS-Datei beschränkt. Wenn Sie mehrere Dateien bereinigen möchten, müssen Sie diese nacheinander bereinigen.

Dust-Me Selectors ist eine Firefox-Erweiterung (für v1.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, so dass beim Testen nachfolgender Seiten Selektoren aus der Liste gestrichen werden können, wenn sie auftreten. Dieses Tool soll in der Lage sein, eine ganze Website zu spinnen, aber ich konnte es leider zum Laufen bringen. Ich glaube auch nicht, dass Sie die CSS-Datei mit entfernten Stilen konfigurieren und herunterladen können.

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

Deadweight ist ein CSS-Coverage-Tool. Mit einer Reihe von Stylesheets und URLs wird festgelegt, welche Selektoren tatsächlich verwendet werden und welche Listen "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 Auffinden 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 Website ein und Sie erhalten eine Liste der CSS-Selektoren. Für jeden Selektor gibt eine Zahl an, wie oft ein Selektor verwendet wird. Dieser Dienst hat einige Einschränkungen. 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, lässt Sie jedoch keine sauberen CSS-Dateien konfigurieren und herunterladen. Es werden nur nicht verwendete CSS-Dateien aufgelistet.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.