it-swarm.com.de

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

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 empfohlen, 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. Zum Beispiel:

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. Die Polsterung von body funktioniert immer, daher kann natürlich nicht der gesamte Selektor body entfernt werden. Und solche nutzlosen Regeln möchte ich auch 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 margin-left loswerden ... 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,

18
liori

Dust Me Selectors Firefox-Erweiterung

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

8
John Conde

Sie können sich auch nused-CSS.com ansehen. Dieses Tool durchsucht Ihre Seiten und erstellt eine optimierte CSS-Datei ohne die nicht verwendeten Selektoren

5
user5859

Ich mochte schon immer CSS Usage . 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.

4
macca1

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, die Sie fragen, aber sie machen die Art von Optimierung, 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 von überschriebenen 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
2
Kev

@ 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 und das CSS in Echtzeit bearbeiten können (schreibt nicht in Ihre CSS-Datei), damit Sie es bearbeiten können und testen Sie CSS-Änderungen, ohne dass Sie Ihre CSS alle 3 Sekunden speichern und hochladen müssen. + lädt mehr Funktionen.

Es gibt auch einen sehr netten DOM-Inspektor, der sich in Firebug einfügt, der sich auch einfügt und sich hervorragend zum Aussortieren von Javascript eignet.

1
Digital Essence

Eigentlich ist John, der neue Browser der Firefox Developer Edition, besser als Firebug oder das Firefox-Dienstprogramm. Probieren Sie es aus und Sie werden nicht enttäuscht sein, da bin ich mir sicher!

https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

0
Kevin Morrison