Wie kann ich nicht verwendete / nicht angewendete CSS-Regeln in einem Stylesheet finden?

18

Ich habe eine riesige CSS-Datei und eine HTML-Datei. Ich möchte herausfinden, welche Regeln beim Anzeigen einer HTML-Datei nicht verwendet werden. Gibt es Werkzeuge dafür?

Die CSS-Datei hat sich über einige Jahre hinweg entwickelt und soweit ich weiß, hat noch niemand etwas davon entfernt - die Leute haben einfach immer wieder neue übergeordnete Regeln geschrieben.

BEARBEITEN: Es wurde vorgeschlagen, Dust-Me Selectors oder das Webseiten-Leistungstool von Chrome zu verwenden. Beide arbeiten jedoch auf der Ebene der Selektoren und nicht nach individuellen Regeln. Ich habe viele Fälle, in denen eine Regel innerhalb eines Selektors immer außer Kraft gesetzt wird - und das ist es, was ich am liebsten loswerden möchte. Beispielsweise:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

Der gesamte Text in meinem HTML-Code befindet sich in einem Wrapper-Element, sodass er niemals weiß ist. bodyDa die Polsterung immer funktioniert, kann natürlich nicht der gesamte bodySelektor entfernt werden. Und solche nutzlosen Regeln möchte ich auch gerne loswerden.

EDIT: Und ein weiterer Fall von nutzloser Regel: Wenn es eine vorhandene dupliziert, ohne etwas zu ändern:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

Ich würde gerne den zweiten loswerden margin-left... wieder scheint es mir, dass diese Werkzeuge solche Dinge nicht finden.

EDIT: Ich schätze alle Antworten, aber leider haben die von Ihnen vorgeschlagenen Tools keine nützlichen Vorschläge gemacht. Ich habe Ihre Antworten positiv bewertet, aber ich werde auf ein Tool warten, das die oben genannten Aufgaben genauer ausführt.

Vielen Dank,

css optimization Liori
quelle
Sie könnten das Fehlen eines geeigneten Werkzeugs zum Anlass nehmen: Wenn Sie verstehen, was Sie brauchen, sind Sie möglicherweise die beste Person, um ein solches Werkzeug zu erstellen. Sie können den Code der vorhandenen Tools auf Ideen und Techniken untersuchen und dann etwas erstellen, das auf der Ebene der Regel und nicht auf der Ebene der Auswahl funktioniert. Ihre Chance auf Ruhm und Reichtum! ...
Bilderstürmer
@Brandon: Diese Frage traf nur die Marke "Bemerkenswerte Frage" ... also könnten Sie recht haben :-)
Liori

Antworten:

8

Dust Me Selecters Firefox-Erweiterung

In den Chrome-Entwicklertools können Sie mit dem Webseitenleistungstool nicht verwendete CSS-Regeln suchen.

John Conde
quelle
Großartig, ich werde es sofort überprüfen!
Liori
Diese Tools können nur nutzlose Selektoren entfernen. Ich habe meine Frage geklärt.
Liori
2
@liori: Ich denke nicht, dass dies zuverlässig möglich ist. In Ihrem Margin-Beispiel erscheint die zweite Margin-Regel möglicherweise überflüssig, weist jedoch eine höhere Spezifität auf und kann eine spätere Regel außer Kraft setzen. Wenn beispielsweise eine Klasse .abceine andere Marge hat, <a class="abc">würde sich die Marge meines Erachtens beim Schweben ändern. Nun, das ist wahrscheinlich nicht das, was Sie beabsichtigen, aber es könnte sicherlich sein, und Sie können diese doppelte Regel nicht blind entfernen.
DisgruntledGoat
@DisgruntledGoat: Ich denke an einen Fall einer geschlossenen Welt: Wenn es nicht spezifiziert ist, existiert es nicht. Wenn es also keine Definitionen für a.abcoder keine <a class="abc"/> im HTML gibt, existiert sie nicht. Auf jeden Fall habe ich die Aufgabe, die mich dazu veranlasst hat, diese Frage hier zu stellen, bereits abgeschlossen und bin zu Ende gegangen mit dem Anwenden einer Menge Heuristiken. Ich habe die Entwicklertools von Chrome ausprobiert, aber sie haben mir nicht viel geholfen.
Liori
5

Sie können auch einen Blick auf Unused-CSS.com werfen. Dieses Tool durchsucht Ihre Seiten und erstellt eine optimierte CSS-Datei ohne die nicht verwendeten Selektoren


quelle
4

Ich habe CSS schon immer gemocht . Es ist ein Plugin für Firebug und lässt Sie die Seite scannen und sehen, welche CSS-Regeln nicht angewendet werden. Es wird sogar automatisch gescannt und funktioniert über mehrere Seiten.

macca1
quelle
2

Check uncss, es ist ein Knotenmodul.

"UnCSS ist ein Tool, mit dem Sie nicht verwendetes CSS aus Ihren Stylesheets entfernen können. Es funktioniert über mehrere Dateien hinweg und unterstützt mit Javascript injiziertes CSS."

https://www.npmjs.com/package/uncss

Nach Kommentar bearbeiten:

Ich denke, Sie fragen nach zwei verschiedenen Dingen:

  1. Nicht verwendete Regeln automatisch entfernen, das kann uncss für Sie tun. Ich habe auch dieses Tool erstellt, CSS byebye, aber es ist nicht automatisch, wie Sie fragen: https://www.npmjs.com/package/css-byebye

  2. Optimieren Sie das Stylesheet, in dem Regeln zusammengeführt / vereinfacht werden können.

In diesem Fall würde ich zwei Tools empfehlen, die diese Art von Dingen ausführen:

Sie machen mehr oder weniger die gleichen Optimierungen, manchmal hat einer bessere Ergebnisse als der andere, und manchmal ist es das Gegenteil. Das hängt von Ihrem Stylesheet ab. (Sie könnten auch eine nach der anderen laufen: P)

Ich benutze sie als Teil eines Build-Prozesses mit Grunzen. Es ist also nicht wirklich eine visuelle Sache, wie Sie es fragen, aber sie machen die Art von Optimierungen, die Sie wollen.

Hier ist, was sie für CSSO sagen (vollständige Informationen hier: https://en.bem.info/tools/optimizers/csso/ )

Strukturelle Optimierungen:

  • Zusammenführen von Blöcken mit identischen Selektoren
  • Blöcke mit identischen Eigenschaften zusammenführen
  • Überschriebene Eigenschaften werden entfernt
  • Entfernen überschriebener Shorthand-Eigenschaften
  • Entfernung von sich wiederholenden Selektoren
  • Teilweise Zusammenführung von Blöcken
  • Teilweise Aufteilung von Blöcken
  • Entfernung von leerem Regelsatz und at-rule
  • Minimierung der Rand- und Polstereigenschaften
Kev
quelle
Gemessen an der Hauptseite funktioniert es auf der Auswahlebene. Kann es tatsächlich Regeln in den beiden Beispielfällen entfernen, die ich in der Frage erwähnt habe?
Liori
Ich habe meine Antwort bearbeitet. Ich habe Ihr erstes Beispiel mit der CSSO-Weboberfläche getestet: Ergebnis: body {color: #fff; Polsterung: 10em} h1, p, ul {color: # 000}
Kev
1

@ John: exzellentes Tool, danke für den Link

@liori: Ich würde auch das Firefox Web Developer-Plugin wärmstens empfehlen, mit dem Sie die Elementnamen / -eigenschaften anzeigen, das CSS in Echtzeit bearbeiten (nicht in Ihre CSS-Datei schreiben) können, damit Sie CSS-Änderungen ohne Faff bearbeiten und testen können zu speichern und laden Sie Ihre CSS immer 3 Sekunden. + lädt mehr Funktionen.

Es gibt auch einen sehr netten DOM-Inspektor, der sich in Firebug einbinden lässt, der sich auch einbinden lässt und sich hervorragend zum Aussortieren von Javascript eignet.

Digitale Essenz
quelle