Tools für die Überprüfung von CSS

Die Überprüfung von CSS ist keine alltägliche Aufgabe für Entwickler, aber manchmal muss man es einfach tun. Vielleicht ist es Teil einer Leistungsbewertung, um kritisches CSS zu identifizieren und ungenutzte Selektoren zu reduzieren. Vielleicht ist es Teil einer Bemühung, die Zugänglichkeit zu verbessern, wobei alle im Code verwendeten Farben auf Kontrast geprüft werden. Es könnte sogar dazu dienen, Konsistenz zu erzwingen!

Was auch immer der Fall ist und wann immer dieser Moment eintritt, greife ich normalerweise zu einigen der Tools, die ich in diesem Artikel behandeln werde. Aber davor sehen wir uns erst einmal an, was es überhaupt bedeutet, CSS zu "überprüfen".

CSS zu überprüfen ist schwierig

Generell beinhaltet die Code-Überprüfung die Analyse von Code, um Fehler oder andere Unregelmäßigkeiten zu finden, wie z. B. mögliche Leistungsprobleme. Für die meisten Programmiersprachen ist das Konzept der Code-Überprüfung relativ einfach: Es funktioniert oder es funktioniert nicht. Aber CSS ist eine spezielle Sprache, bei der Fehler von Browsern meist ignoriert werden. Dann ist da noch die Tatsache, dass man den gleichen Stil auf viele verschiedene Arten erreichen kann. Das macht CSS, gelinde gesagt, etwas knifflig zu überprüfen.

Das Finden dieser Fehler könnte durch die Verwendung einer Erweiterung für Ihren bevorzugten Code-Editor oder durch die Einrichtung eines Linters oder Code-Checkers verhindert werden. Aber das ist nicht das, was ich hier zeigen möchte, und das reicht nicht aus. Wir könnten immer noch zu viele Farben, typografische Definitionen oder z-Indizes verwenden, was alles zu einer unübersichtlichen, nicht wartbaren und instabilen CSS-Codebasis führen könnte.

Um CSS wirklich zu überprüfen, müssten wir tiefer graben und Orte finden, die nicht als Best Practices gelten. Um diese Orte zu finden, könnten wir die folgenden Tools verwenden.

Browser DevTools

Werfen wir einen Blick auf die Chrome DevTools-Tools für die CSS-Überprüfung. Ich benutze hier Brave, das auf Chromium basiert. Sie möchten vielleicht auch diesen Artikel von Umar Hansa lesen, der eine ganze Reihe großartiger DevTool-Funktionen zusammengestellt hat, die 2020 veröffentlicht wurden.

Wenn Sie CSS-Code manuell inspizieren möchten, gibt es das Tool Inspect. Damit können wir den auf ein bestimmtes Element angewendeten CSS-Code sehen. Mit dem "Inspect-Pfeil" können wir sogar zusätzliche Details zu Farben, Schriftarten, Größen und Barrierefreiheit sehen.

Grid und Flex-Inspektor

Es gibt viele praktische Details in der DevTools-Oberfläche, aber mein Favorit ist der Grid- und Flex-Inspektor. Um sie zu aktivieren, gehen Sie zu den Einstellungen (ein kleines Zahnradsymbol oben rechts in den DevTools), klicken Sie auf "Experimente" und aktivieren Sie dann die Debugging-Funktionen für CSS Grid und Flexbox. Obwohl dieses Tool hauptsächlich zur Fehlersuche bei Layout-Problemen verwendet wird, benutze ich es manchmal, um schnell festzustellen, ob CSS Grid oder Flexbox auf der Seite überhaupt verwendet wird.

CSS-Übersicht

Das Überprüfen von CSS ist ziemlich grundlegend und alles muss manuell erfolgen. Schauen wir uns einige fortgeschrittenere DevTools-Funktionen an.

CSS Overview ist eine davon. Um das CSS Overview-Tool zu aktivieren, gehen Sie zu den Einstellungen, klicken Sie auf Experimente und aktivieren Sie die Option CSS Overview. Um das CSS Overview-Panel zu öffnen, können Sie die Tastenkombination CMD+Shift+P verwenden, "css overview" eingeben und dann "Show CSS Overview" auswählen. Dieses Tool fasst CSS-Eigenschaften wie Farben, Schriftarten, Kontrastprobleme, ungenutzte Deklarationen und Media Queries zusammen. Ich verwende dieses Tool normalerweise, um ein "Gefühl" dafür zu bekommen, wie gut oder schlecht der CSS-Code ist. Wenn es beispielsweise "50 Shades of Gray" gibt oder zu viele typografische Definitionen, bedeutet dies, dass der Styleguide nicht eingehalten wurde oder möglicherweise gar nicht existiert.

Coverage-Panel

Das Coverage-Tool zeigt die Menge und den Prozentsatz des auf der Seite verwendeten Codes an. Um es anzuzeigen, verwenden Sie die Tastenkombination CMD+Shift+P, geben Sie "coverage" ein, wählen Sie Show Coverage aus und klicken Sie auf das "Aktualisieren"-Symbol.

Sie könnten nur CSS-Dateien filtern, indem Sie ".css" in das URL-Filterfeld eingeben. Ich verwende dieses Tool normalerweise, um die Übertragungstechnik der Website zu verstehen. Wenn ich beispielsweise sehe, dass die Abdeckung ziemlich hoch ist, kann ich davon ausgehen, dass die CSS-Datei für jede Seite separat generiert wird. Dies sind möglicherweise keine kritischen Daten, aber manchmal hilft es, die Caching-Strategie zu verstehen.

Rendering-Panel

Das Rendering-Panel ist ein weiteres nützliches Werkzeug. Um das Rendering-Panel zu öffnen, verwenden Sie erneut CMD+Shift+P, geben Sie diesmal "rendering" ein und wählen Sie die Option "Show Rendering". Dieses Werkzeug hat viele Optionen, aber meine Favoriten sind

• Paint flashing — zeigt grüne Rechtecke an, wenn ein Neuanstrichereignis auftritt. Ich verwende es, um Bereiche zu identifizieren, die zu viel Zeit für das Rendern benötigen.
• Layout Shift Regions — zeigt blaue Rechtecke an, wenn ein Layout-Shift auftritt. Um diese Optionen optimal zu nutzen, stelle ich normalerweise das Preset "Slow 3G" unter dem Tab "Network" ein. Manchmal nehme ich meinen Bildschirm auf und verlangsame dann das Video, um die Layout-Shifts zu finden.
• Frame Rendering Stats — zeigt die Echtzeitnutzung von GPU und Frames an. Dieses Tool ist nützlich, um übermäßige Animationen und Scrolling-Probleme zu erkennen.

Diese Tools sind etwas, das die reguläre Überprüfung nicht beinhaltet, aber ich finde es wichtig zu verstehen, ob der CSS-Code performant ist und die Energie eines Geräts nicht beansprucht.

Andere Optionen können für die Fehlerbehebung nützlicher sein, wie z. B. Emulation und Deaktivierung verschiedener Funktionen, Erzwingen der Funktion prefers-color-scheme oder des Druckmedientyps und Deaktivieren lokaler Schriftarten.

Performance Monitor

Ein weiteres Tool zur Überprüfung der Leistung von CSS-Code ist der Performance Monitor. Um ihn zu aktivieren, verwenden Sie erneut CMD+Shift+P, geben Sie "performance monitor" ein und wählen Sie die Option "Show Performance Monitor". Ich verwende dieses Tool normalerweise, um zu sehen, wie viele Neuberechnungen und Layouts beim Interagieren mit der Seite oder bei Animationen ausgelöst werden.

Performance-Panel

Das Performance-Panel zeigt eine detaillierte Ansicht aller Browserereignisse während des Seitenaufrufs an. Um das Performance-Tool zu aktivieren, drücken Sie CMD+Shift+P, geben Sie "performance" ein, wählen Sie Show Performance aus und klicken Sie dann auf das "Neuladen"-Symbol. Ich aktiviere normalerweise die Optionen "Screenshots" und "Web Vitals". Die interessantesten Metriken für mich sind First Paint, First Contentful Paint, Layout Shifts und Largest Contentful Paint. Es gibt auch ein Kreisdiagramm, das die Mal- und Renderingzeit anzeigt.

DevTools werden möglicherweise nicht als klassisches Audit-Tool betrachtet, aber sie helfen uns zu verstehen, welche CSS-Funktionen verwendet werden, wie effizient der Code ist und wie er performt – all das sind wichtige Dinge, die überprüft werden müssen.

Online-Tools

DevTools ist nur ein Werkzeug, das mit vielen Funktionen ausgestattet ist. Aber es gibt auch andere verfügbare Tools, die wir zur Überprüfung von CSS verwenden können.

Spezifitäts-Visualisierer

Specificity Visualizer zeigt die Spezifität von CSS-Selektoren im Code an. Besuchen Sie einfach die Website und fügen Sie das CSS ein.

Das Hauptdiagramm zeigt die Spezifität im Verhältnis zum Speicherort im Stylesheet. Die beiden anderen Diagramme zeigen die Verwendung spezifischer Spezifitäten. Ich benutze diese Seite oft, um "schlechte" Selektoren zu finden. Wenn ich zum Beispiel sehe, dass viele Spezifitäten rot markiert sind, kann ich leicht schlussfolgern, dass der Code besser sein könnte. Es ist hilfreich, Screenshots als Referenz zu speichern, während Sie daran arbeiten, Dinge zu verbessern.

CSS Spezifitäts-Diagramm-Generator

CSS Specificity Graph Generator ist ein ähnliches Werkzeug zur Visualisierung der Spezifität. Es zeigt ein etwas anderes Diagramm, das Ihnen helfen kann zu sehen, wie Ihre CSS-Selektoren nach Spezifität organisiert sind. Wie es auf der Seite des Tools heißt: "Spikes sind schlecht, und der allgemeine Trend sollte zu einer höheren Spezifität später im Stylesheet gehen." Es wäre interessant, das weiter zu diskutieren, aber es liegt außerhalb des Rahmens dieses Artikels. Harry Roberts hat jedoch ausführlich darüber in seinem Artikel "The Specificity Graph" geschrieben, der sich zu lesen lohnt.

CSS-Statistiken

CSS Stats ist ein weiteres Tool, das Analysen und Visualisierungen für Ihre Stylesheets bereitstellt. Tatsächlich hat Robin vor einiger Zeit darüber geschrieben und gezeigt, wie er es verwendet hat, um das Stylesheet bei seiner Arbeit zu überprüfen.

Alles, was Sie tun müssen, ist die URL der Website einzugeben und Enter zu drücken. Die Informationen sind in aussagekräftige Abschnitte unterteilt, von der Anzahl der Deklarationen bis hin zu Farben, Typografie, z-Indizes, Spezifität und mehr. Auch hier möchten Sie vielleicht Screenshots für die spätere Referenz speichern.

Projekt Wallace

Project Wallace wird von Bart Veneman entwickelt, der das Projekt bereits hier auf CSS-Tricks vorgestellt hat. Die Stärke von Project Wallace liegt darin, dass es Änderungen auf Basis von Importen vergleichen und visualisieren kann. Das bedeutet, Sie können frühere Zustände Ihrer CSS-Codebasis sehen und wie sich Ihr Code zwischen den Zuständen verändert. Ich finde diese Funktion ziemlich nützlich, besonders wenn Sie jemanden davon überzeugen wollen, dass der Code verbessert wurde. Das Tool ist für ein einzelnes Projekt kostenlos und bietet kostenpflichtige Pläne für weitere Projekte.

CLI-Tools

Neben DevTools und Online-Tools gibt es auch Befehlszeilen-Schnittstellen (CLI)-Tools, die bei der Überprüfung von CSS helfen können.

Wallace

Eines meiner Lieblings-CLI-Tools ist Wallace. Nach der Installation geben Sie wallace und dann den Namen der Website ein. Die Ausgabe zeigt alles, was Sie über den CSS-Code der Website wissen müssen. Meine Lieblingsdinge, auf die ich achte, sind die Anzahl der Verwendungen von !important und wie viele IDs im Code vorhanden sind. Eine weitere nette Information ist die höchste Spezifitätszahl und wie viele Selektoren diese verwenden. Dies können rote Flaggen für "schlechten" Code sein.

Was mir an diesem Tool am besten gefällt, ist, dass es den gesamten CSS-Code von der Website extrahiert, nicht nur externe Dateien, sondern auch Inline-Code. Deshalb stimmen die Berichte von CSS Stats und Wallace nicht überein.

csscss

Das csscss CLI-Tool zeigt an, welche Regeln die gleichen Deklarationen teilen. Dies ist nützlich, um duplizierten Code und Möglichkeiten zur Reduzierung der geschriebenen Menge zu identifizieren. Ich würde zweimal darüber nachdenken, dies zu tun, da es sich möglicherweise nicht lohnt, insbesondere angesichts der heutigen Caching-Mechanismen. Es ist erwähnenswert, dass csscss Ruby benötigt.

Weitere nützliche Werkzeuge

Andere CSS-Tools werden möglicherweise nicht zur Überprüfung verwendet, sind aber dennoch nützlich. Listen wir auch diese auf

• Color Sorter — Sortiert CSS-Farben nach Farbton, dann nach Sättigung.
• CSS Analyzer — Generiert eine Analyse für einen CSS-String.
• constyble — Dies ist ein Linter für CSS-Komplexität, basierend auf CSS Analyzer.
• Extract CSS Now — Ruft das gesamte CSS von einer einzelnen Webseite ab.
• Get CSS — Sammelt das gesamte CSS von einer Seite.
• uCSS — Durchsucht Websites, um ungenutztes CSS zu identifizieren.

Fazit

CSS ist überall um uns herum und wir müssen es als gleichwertigen Bestandteil jedes Projekts betrachten. Es spielt keine Rolle, was andere Leute über dein CSS denken, aber was du selbst denkst, ist wirklich wichtig. Wenn dein CSS organisiert und gut geschrieben ist, wirst du weniger Zeit mit der Fehlersuche verbringen und mehr Zeit mit der Entwicklung neuer Funktionen. In einer idealen Welt würden wir alle darin schulen, gutes CSS zu schreiben, aber das braucht Zeit.

Lassen Sie heute den Tag sein, an dem Sie anfangen, sich um Ihren CSS-Code zu kümmern.

Ich weiß, dass die Überprüfung von CSS nicht für jeden Spaß macht. Aber wenn Sie Ihren Code mit einem dieser Tools laufen lassen und versuchen, auch nur einen Teil Ihrer CSS-Codebasis zu verbessern, dann hat dieser Beitrag seine Aufgabe erfüllt.

Ich denke in letzter Zeit immer mehr über CSS-Code nach und versuche, mehr Entwickler dazu zu bringen, CSS-Code respektvoller zu schreiben. Ich habe sogar ein neues Projekt unter css-auditors.com gestartet (Juhu für Bindestrich-Domainnamen!), das sich der Überprüfung von CSS widmet.

Wenn Sie weitere Tools kennen, lassen Sie es mich in den Kommentaren wissen.