Hier ist das Ding mit "ungenutzten CSS"-Tools

Es gibt viele Tools, die darauf abzielen, Ihnen beim Entfernen von "ungenutztem CSS" aus Ihrem Projekt zu helfen. Keine Woche vergeht, in der ich kein Tool dafür sehe, das geteilt oder beworben wird. Es muss bei einigen Entwicklern auf eine Art perfekte Saite treffen. Mir ist Performance wichtig, und ich weiß, dass die Reduzierung von Dateigrößen gut für die Performance ist. In der Tat ist es das. Ich wette, wir haben CSS in unseren Stylesheets, das ungenutzt ist, und wenn wir das entfernen würden, wäre das ein Performance-Gewinn. Ja, wäre es. Wir sollten das automatisieren. Ähhh, da bin ich mir nicht so sicher.

Es gibt wichtige Akteure im Bereich Performance-Tools, die diese Idee hervorheben, wie Lighthouse und wie es Ihnen CSS- und JS-„Abdeckung“ bietet, was Ihnen sicherlich sagen wird, dass Sie Code versenden, den Sie nicht benötigen.

Die Tools, die behaupten, Ihnen bei ungenutztem CSS zu helfen, müssen Analysen durchführen, um Ihnen sagen zu können, was ungenutzt ist und was nicht.

Hier ist eine Möglichkeit, diese Analyse durchzuführen. Rendern Sie eine Seite Ihrer Website und holen Sie sich das vollständige DOM. Holen Sie sich dann auch das vollständige CSSOM, das Ihnen ein Array aller Selektoren in Ihrem CSS liefern kann. Durchlaufen Sie diese Selektoren und führen Sie einen querySelector im DOM durch und prüfen Sie, ob er etwas übereinstimmt. Wenn nicht, ist dieser CSS-Selektor ungenutzt.

Clever, oder?!

Ich denke schon. Aber diese Analyse malt ein ziemlich begrenztes Bild.

Sagen wir, die Analyse läuft zwei Sekunden nach Abschluss der Seite, aber es gibt JavaScript, das nach fünf Sekunden ausgeführt wird und ein Modal einfügt (ugghghk, ich weiß). Die Analyse hätte die HTML-Elemente in diesem Modal verpasst, die wahrscheinlich Stile haben, und hätte diese Stile somit fälschlicherweise als ungenutzt gemeldet.

Das Timing ist also ein Faktor. Hoffentlich hat dieses Analyse-Tool eine Möglichkeit, mehrere Timings zu konfigurieren.

Wir betrachten bisher auch nur eine Seite. Natürlich kann eine Website Dutzende, Hunderte oder Tausende von Seiten haben. Um ganz sicher über ungenutzte Stile zu sein, ist der Blick auf alle davon die sicherste Methode.

Mehrere Seiten sind ein weiterer Faktor. Hoffentlich hat ein Analyse-Tool eine Möglichkeit, so viele Seiten wie Sie ihm sagen, zu betrachten. Vielleicht kann es sich eine Sitemap ansehen?

Erinnern Sie sich an die Sache mit dem Timing? Wir könnten das Timing als eine generische Form von Zustand betrachten. Es gibt unzählige andere Dinge, die zustandsbezogen sein könnten. Ist der Benutzer eingeloggt oder nicht? Welchen Plan hat er? Ist seine Kreditkarte abgelaufen, sodass eine Art Sondernachricht angezeigt wird? Ändern situative Dinge wie Zeit/Datum/Standort den Zustand? Was ist mit Echtzeitdaten? Zeug von einer API?

Anwendungszustand ist eindeutig ein großer Faktor. Hoffentlich kann dieses Analyse-Tool alle möglichen Kombinationen von Zuständen auslösen/festlegen.

Es gibt auch interaktiven Zustand. Was ist mit Modals, die angezeigt werden, weil etwas angeklickt wird? Welcher ist der aktive Tab? Ist dieses Menü geöffnet oder geschlossen? Wo ist die Scrollposition? Es gibt unendliche Permutationen davon. Stellen Sie sich eine Warnleiste vor, die sieben Sekunden nach dem Login des Benutzers angezeigt wird, um den Benutzer vor seiner abgelaufenen Kreditkarte zu warnen, die ein individuell gestaltetes Auswahlelement enthält, das in einem offenen oder geschlossenen Zustand sein kann, aber nur auf der Benutzerseiteneinstellungen-Seite.

Es scheint unwahrscheinlich, dass dieses Analyse-Tool all diese Möglichkeiten bewältigen kann. Selbst mit viel Konfiguration, simulierten Zuständen und Integrationstests könnte es die nahezu unendlichen möglichen Permutationen all dessen nicht abdecken.

Und doch denke ich nicht, dass diese Tools nutzlos sind – sie sind nur...Tools. Ihre Nutzung kann tatsächlich ein positiver Schritt in Richtung besserem Code sein. Ihre Nutzung sagt OK, ich gebe es zu, ich habe ein wenig Angst um mein CSS. Sie könnten dieses Tool verwenden, um ein grobes Bild davon zu erhalten, was Ihr ungenutztes CSS sein könnte, und es dann mit Ihrem eigenen Wissen über Ihre CSS-Codebasis kombinieren, um fundiertere Entscheidungen zu treffen. Oder nehmen Sie einen weiteren technologischen Schritt und tun Sie etwas wie fügen Sie diesen ungenutzten Selektoren ein Hintergrundbild hinzu und überprüfen Sie die Serverprotokolle, um zu sehen, ob sie aufgerufen werden.

Es sei gesagt, dass diese ganze Idee von ungenutztem CSS Teil der CSS-in-JS-Saga ist, die unsere Branche gerade durchmacht. Wenn alle Ihre Stile als Teil von Komponenten geschrieben sind, gibt es irgendwie kein ungenutztes CSS. Entweder wird die Komponente verwendet und die Stile kommen mit ihr, oder sie wird nicht verwendet. Wenn Sie besonders empfindlich auf die Gefahr von ungenutztem CSS reagieren, könnte allein das Sie zu einem CSS-in-JS-Tool bewegen.

Es sei auch gesagt, dass diese DOM- und CSSOM-Analysetechnik nur eine mögliche Methode zur Überprüfung auf ungenutzte Stile ist. Wenn Sie eine Art schickes Tooling hätten, das alle Ihre Vorlagen, Stile und Skripte analysieren könnte, könnte das vermutlich auch ungenutzte Stile ermitteln. Wir sprechen darüber in der jüngsten ShopTalk Show Episode mit Chris Eppstein.