Gibt es eine Möglichkeit, ungenutztes CSS in einer Website zu finden?

Question

Gibt es eine Möglichkeit, ungenutztes CSS in einer Website zu finden?

Ich versuche, ein Projekt zu bereinigen, das ich gerade geerbt habe.

Answer 1

Dust-me Selectors ist ein Firefox-Plugin, das nicht verwendete Selektoren findet.

Answer 2

Ich lief in diesem und Ihre Frage erinnert: http://github.com/geuis/helium-css

Answer 3

Es gibt so viel, das über Best-Practice-Methoden für CSS gesagt werden kann. Ich werde versuchen, bei den Hauptpunkten zu bleiben.

Verwenden Sie einen CSS-Reset.

Versuchen Sie, wirklich allgemeine CSS-Anweisungen wie h1 {} und #container em {} zu entfernen. Sie sind viel besser dran mit h1.section-title und , weil auf diese Weise, wenn Sie wählen, h1 oder em eine andere Art und Weise irgendwo in Ihrem Dokument zu verwenden, müssen Sie sich keine Sorgen über bestehende Code überschreiben.

Seien Sie nicht zu spezifisch in Ihren CSS-Selektoren, wenn Sie nicht müssen. Sie müssen wirklich nur einen hohen Grad an Spezifität haben, wenn Sie in einem bestimmten Bereich die Darstellung des Elements ändern. Andernfalls, um Ihren Code für Ihre block Klasse wiederverwendbar zu machen, könnte #container .content .block ... in vielen Fällen auf .block ... reduziert werden.

Suchen Sie nach Gemeinsamkeiten in Ihrem CSS und sehen Sie, ob Sie wiederverwendbare Klassen erstellen können. Wenn Sie ähnliche Blöcke haben class="favorites" und class="popular", drehen Sie es in class="block block-favorites" und class="block block-popular", und setzen Sie die Gemeinsamkeiten in .block.

Gewöhnen Sie sich an, dass Bereiche in Ihrem CSS eine automatische Breite haben (dies kann implizit erfolgen), so dass sie auf die Breite Ihrer Container anwachsen. Dies macht es unglaublich einfach, Abschnitte von einem engen Teil Ihrer Website zu einem großen Teil Ihrer Website zu verschieben, ohne Code ändern zu müssen.

Wenn Sie Ihren Code kommentieren und in Abschnitte unterteilen, hilft das normalerweise, den Code lesbarer zu machen.

Sie wären überrascht, wie viel sauberer Ihr Code aussieht, wenn Sie leistungsfähigere CSS-Selektoren implementieren. Die meisten von ihnen sind Cross-Browser-kompatibel (Internet   Explorer 7 und höher).
Einige wertvolle Ressourcen: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

Antwort bewegt von:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

Chrome 59 für CSS und JavaScript seit 2017-04 Einbau-Abdeckung Display hat: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Sie können es aktivieren, indem Sie die Dev-Tools öffnen, dann den Befehl me nu (Cmd+Shift+P auf Mac oder Ctrl+Shift+P unter Windows und Linux), und geben Sie dann "show coverage" ein.