Wenn von „ungenutzt“ im Zusammenhang mit CSS die Rede ist, geht es meist darum, CSS-Teile zu entfernen, die auf Ihrer Website nicht verwendet werden oder zumindest die Stile, die auf einer bestimmten Seite nicht aktuell genutzt werden. Möglichst wenig CSS ist am besten! Ich habe schon früher darüber geschrieben, wie das ein schwieriges Problem ist. Im JavaScript-Bereich entspricht dem Tree Shaking (Entfernen von ungenutztem JavaScript).
Aber was ist mit dem umgekehrten Weg, dem Erkennen von Klassen in HTML, die in Ihrem CSS nicht verwendet werden? Wenn Sie das mit Sicherheit wüssten, könnten Sie Ihren Markup bereinigen und Klassen entfernen, die nichts bewirken.
Ich habe neulich Robert Kieffer einen Gist posten sehen, der eine interessante Lösung enthielt. Die Idee ist, document.styleSheets zu laden und *alle* Regeln zu finden (die, die Klassen sind). Dann wird ein MutationObserver verwendet, um den DOM auf alles HTML zu überwachen und die classList jedes Knotens zu überprüfen, ob sie mit einer aus einer Stylesheet übereinstimmt. Wenn das HTML eine Klasse hat, die in keiner Stylesheet gefunden wird, wird sie gemeldet.
Ich habe es kurz ausprobiert und es funktioniert und meldet korrekt ungenutzte Klassen
Ihre Erfahrungen können variieren. Zum einen ist dieses Skript als ES-Modul eingerichtet. Das bedeutet, wenn Sie es einfach importieren und auf einem ganz normalen HTML-Dokument ausführen, findet es nichts, da Ihr <script type="module"> verzögert geladen wird und der MutationObserver nichts erfassen kann. Ich habe es für meine Demo entmodult und in den <head> gestellt, um sie zum Laufen zu bringen.
Ich habe die Site auf Netlify Dropped online gestellt, falls Sie sie sich genauer ansehen möchten. Ich hätte CodePen verwendet, aber CodePen verknüpft Ihre Stile standardmäßig nicht als <link>ed Stylesheets (aber Sie könnten externe Ressourcen verwenden, um das zu tun). Ich dachte einfach, es wäre als bereitgestellte Website klarer.
Vorsicht jetzt.
Genauso wie ungenutztes CSS ein schwieriges Problem ist, weil es schwer zu wissen ist, ob eine Regelgruppe ungenutzt ist, könnte dieser Ansatz ein *noch schwierigeres* Problem sein. Erstens könnten Klassen als JavaScript-Hooks für Dinge verwendet werden. Stile könnten auf der Seite in <style>-Blöcken eingefügt werden, die dieses Skript nicht prüft. Man könnte sogar Integrationstests haben, die in CI ausgeführt werden und Klassen für Testzwecke verwenden.
Ich würde sagen, dass diese Art von Funktion ein nützliches Werkzeug ist, um einen Blick auf Klassen zu werfen, von denen Sie vermuten, dass sie ungenutzt sein könnten. Aber ich würde nicht sagen, dass Sie die Erlaubnis haben, dieses Ding auszuführen und dann jede gemeldete Klasse ohne weitere Untersuchung zu entfernen.
Ich habe mich nur darauf konzentriert, wie man ungenutztes CSS und JavaScript entfernt, aber das eröffnet meinen Horizont, jetzt konzentriere ich mich auch auf ungenutztes HTML, danke
Ich habe dies getan, um Leute zu erkennen, die Komponenten überschreiben. Ich habe hier ein Beispiel: https://ddamato.github.io/css-identify-overrides/examples/
Schön!
console.log("Danke!")Ich wünschte, ich könnte das einfach auf WordPress anwenden. Allerdings generiert WordPress von sich aus viele Klassen. Ganz zu schweigen von diesem Plugin und jenem. :-D
Ich denke, am Ende werde ich mit meinem kleinen Overhead leben müssen. Das Ansprechen von Dingen ist mit Gutenberg immer einfacher, wenn man ein paar zusätzliche Klassen zur Verfügung hat.