Tools zur Prüfung von CSS

CSS -Code -Auditing ist keine häufige Aufgabe für die täglichen Aufgaben der Entwickler, aber manchmal muss es erledigt werden. Dies könnte Teil einer Leistungsbewertung sein, um kritische CSS zu identifizieren und ungenutzte Selektoren zu reduzieren. Es könnte auch sein, dass die Zugänglichkeit verbessert und Kontrastbewertungen für alle in der Codebasis verwendeten Farben durchgeführt wird. Es könnte sogar sein, Konsistenz durchzusetzen!

Aus irgendeinem Grund verwende ich normalerweise einige der in diesem Artikel beschriebenen Tools. Bevor wir jedoch die Tools einführen, verstehen wir zunächst, was "geprüft" CSS bedeutet.

Das CSS -Audit ist nicht einfach

In der Regel umfasst die Codeprüfung die Analyse des Codes, um Fehler oder andere Unregelmäßigkeiten wie möglicher Leistungsprobleme zu finden. Für die meisten Programmiersprachen ist das Konzept der Codeprüfung relativ einfach: Der Code ist entweder gültig oder ungültig. Aber CSS ist eine besondere Sprache, und seine Fehler werden vom Browser größtenteils ignoriert. Darüber hinaus können Sie denselben Stil auf viele verschiedene Arten implementieren. Dies macht die Prüfung von CSS ein wenig schwierig, um es gelinde auszudrücken.

Sie können die Erweiterung Ihres bevorzugten Code -Editors verwenden oder einen Codeinspektor einrichten, um zu verhindern, dass diese Fehler entdeckt werden. Aber das möchte ich hier nicht zeigen, und das ist nicht genug. Möglicherweise verwenden wir immer noch zu viele Farben, Typografiedefinitionen oder Z-Indexes, die alle zu einer chaotischen, schwer zu verwaltenden, instabilen CSS-Codebasis führen können.

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

Browser -Entwickler -Tools

Schauen wir uns die Tools an, die für die CSS -Prüfung in Chrome -Entwickler -Tools verwendet werden. Ich benutze den tapferen Browser hier basierend auf Chrom. Vielleicht möchten Sie diesen Artikel auch von Umar Hansa ansehen, der eine ganze Reihe großartiger Devtool -Funktionen zusammenstellt, die 2020 veröffentlicht wurden.

Wenn Sie es vorziehen, Ihren CSS -Code manuell zu überprüfen, können Sie das Inspektionstool verwenden. Mit der Verwendung können wir den CSS -Code sehen, der auf ein bestimmtes Element angewendet wird. Mit dem Pfeil inspizieren können wir sogar weitere Details zu Farbe, Schriftart, Größe und Zugänglichkeit sehen.

Gitter- und Flex -Inspektor

Es gibt viele praktische Details in der Devtools -Schnittstelle, aber meine Favoriten sind die Gitter- und Flex -Inspektoren. Um sie zu aktivieren, gehen Sie zu Einstellungen (das Pinion -Symbol in der oberen rechten Ecke des Entwickler -Tools), klicken Sie auf Experiment und aktivieren Sie CSS Grid und Flexbox -Debugging. Obwohl dieses Tool hauptsächlich zum Debuggen von Layoutproblemen verwendet wird, stelle ich manchmal fest, ob auf der Seite ein CSS -Raster oder eine Flexbox verwendet wird.

CSS -Übersicht

Das Überprüfen von CSS ist sehr einfach und alle Vorgänge müssen manuell durchgeführt werden. Schauen wir uns einige fortschrittlichere Devtools -Funktionen an.

CSS -Übersicht ist einer von ihnen. Um das CSS -Überblick -Tool zu aktivieren, gehen Sie zu Einstellungen, klicken Sie auf Experiment und aktivieren Sie dann die Option CSS -Übersicht. Um das CSS -Übersichtsbereich zu öffnen, können Sie die Tasten CMD Shift P verwenden, "CSS -Übersicht" eingeben und dann "CSS -Übersicht anzeigen" auswählen. Dieses Tool fasst CSS -Eigenschaften wie Farbe, Schriftart, Kontrastfragen, nicht verwendete Ansprüche und Medienfragen zusammen. Normalerweise verwende ich dieses Tool, um zu sehen, wie gut oder schlechter CSS -Code ist. Wenn es beispielsweise „50 Graustufen“ oder zu viele Typen -Definitionen gibt, bedeutet dies, dass der Stilführer nicht befolgt wird oder der Stilführer möglicherweise überhaupt nicht vorhanden ist.

Codeabdeckung

Codeabdeckung Das Tool zeigt den Betrag und den Prozentsatz des auf der Seite verwendeten Codes an. Um es anzuzeigen, verwenden Sie die Taste CMD Shift P P -Verknüpfung, geben Sie "Abdeckung" ein, wählen Sie die Codeabdeckung anzeigen und klicken Sie dann auf das Symbol "Aktualisieren".

Sie können nur CSS -Dateien filtern, indem Sie ".css" in der URL -Filtereingabe eingeben. Normalerweise verwende ich dieses Tool, um die Liefertechniken der Website zu verstehen. Wenn ich beispielsweise sehe, dass die Abdeckung ziemlich hoch ist, kann ich davon ausgehen, dass jede Seite eine CSS -Datei separat generiert. Dies sind möglicherweise keine kritischen Daten, aber manchmal hilft es, die Strategien zu verstehen.

Rendering Panel

Rendering -Panels sind 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 "Rendering anzeigen". Dieses Tool hat viele Optionen, aber meine Lieblingsoptionen sind:

• Zeichnen Sie Blitz - schwankt ein grünes Rechteck, wenn ein Neuausfallereignis auftritt. Ich benutze es, um Bereiche zu identifizieren, die zu lange wiedergegeben wurden.
• Layout -Offset -Bereich - Bucht ein blaues Rechteck, wenn ein Layout -Offset auftritt. Um das Beste aus diesen Optionen zu nutzen, habe ich normalerweise das langsame 3G -Voreinsatz unter der Registerkarte Netzwerk festgelegt. Ich nehme manchmal den Bildschirm auf und verlangsame das Video dann, um den Layout -Offset zu finden.
• Frame-Rendering-Statistiken -Verschiebt die Echtzeitverwendung von GPU und Frames. Dieses Tool ist sehr bequem, wenn schwere Animations- und Scrollenprobleme identifiziert werden.

Diese Tools sind nicht durch regelmäßige Audits impliziert, aber ich fand es entscheidend, die Leistung des CSS -Codes zu verstehen und ob es die Energie des Geräts nicht abtropfen lässt.

Andere Optionen können für die Debuggierung von Problemen förderlicher sein, z. B. die Emulation und Deaktivierung verschiedener Funktionen, die Erzwingen der Feature oder die Druckmedientypen für die Farbfarbhemme sowie die Deaktivierung lokaler Schriftarten.

Leistungsmonitor

Ein weiteres Tool für die Prüfung des CSS -Codes der Leistung ist der Leistungsmonitor . Um dies zu aktivieren, verwenden Sie CMD Shift P erneut, geben Sie "Leistungsmonitor" ein und wählen Sie die Option "Performance Monitor". Normalerweise verwende ich dieses Tool, um zu sehen, wie viele Neuberechnung und Layouts bei der Interaktion mit einer Seite oder bei einer Animation ausgelöst werden.

Performance -Panel

Aufführung Das Panel zeigt eine detaillierte Ansicht aller Browser -Ereignisse beim Laden von Seite an. Um Leistungstools zu aktivieren, führen Sie CMD Shift P durch, geben Sie die Leistung an, wählen Sie die Leistung anzeigen und klicken Sie dann auf das Reload -Symbol. Normalerweise aktiviere ich die Screenshot- und Web -Metrikenoptionen. Die interessantesten Metriken für mich sind die erste Ziehung, der erste Inhalt, den Layout -Offset und die maximale Inhalte. Es gibt auch ein Kreisdiagramm, das die Zeichnungs- und Rendering -Zeiten zeigt.

Devtools werden möglicherweise nicht als klassisches Prüfungswerkzeug angesehen, aber es kann uns helfen, zu verstehen, welche CSS -Funktionen verwendet werden, die Effizienz des Codes und seine Leistung - alle sind Schlüsselfaktoren für die Prüfung.

Online -Tools

Devtools ist nur ein leistungsstarkes Werkzeug. Wir können aber auch andere verfügbare Tools verwenden, um CSS zu prüfen.

Spezifische Visualisierungstools

Das Spezifitätsvisualisierungstool zeigt die Spezifität von CSS -Selektoren in der Codebasis. Besuchen Sie einfach die Website und fügen Sie das CSS ein.

Das Hauptdiagramm zeigt die Beziehung zwischen Spezifität und Position im Stilblatt. Zwei weitere Diagramme zeigen eine spezifische Verwendung. Ich benutze diese Site oft, um "schlechte" Selektoren zu finden. Wenn ich beispielsweise viele in Rot markierte Besonderheiten sehe, kann ich leicht zu dem Schluss kommen, dass der Code verbessert werden kann. Es ist hilfreich, Screenshots als Referenz zu speichern, wenn Sie hart arbeiten, um sich zu verbessern.

CSS-spezifischer Diagrammgenerator

Der CSS -Spezifitäts -Diagrammgenerator ist ein ähnliches Tool zur Visualisierung der Spezifikation. Es zeigt ein etwas anderes Diagramm, mit dem Sie verstehen können, wie CSS -Selektoren nach Spezifität organisiert sind. Wie auf der Tool -Seite sagt: "Der Höhepunkt ist nicht gut, und der Gesamttrend sollte sein, dass die Spezifität hinter dem Stilblatt immer höher wird." Es ist interessant, dies weiter zu diskutieren, aber es liegt außerhalb des Rahmens dieses Artikels. Harry Roberts schreibt dies jedoch ausführlich in seinem Artikel "Spezialkarten" und es ist einen Blick wert.

CSS -Statistik

CSS Statistics ist ein weiteres Tool, das Analysen und Visualisierungen für Ihre Stylesheets bietet. Tatsächlich schrieb Robin zuvor einen Artikel darüber und zeigte, wie er ihn bei seiner Arbeit zu Prüfungsstilheets benutzte.

Sie müssen nur die URL der Site eingeben und die Eingabetaste drücken. Die Informationen werden in aussagekräftige Teile unterteilt, von der Deklaration bis hin zu Farbe, Typografie, Z-Index, Spezifität und mehr. Möglicherweise müssen Sie die Screenshots möglicherweise für zukünftige Referenz speichern.

Projekt Wallace

Project Wallace wurde von Bart Veneman erstellt, der hier das Projekt auf CSS-Tricks behandelt hat. Die Kraft des Projekts Wallace ist, dass sie Änderungen basierend auf importierten Inhalten vergleichen und visualisieren kann. Dies bedeutet, dass Sie den vorherigen Zustand der CSS -Codebasis anzeigen und sehen können, wie sich der Code zwischen den Zuständen ändert. Ich fand diese Funktion sehr nützlich, insbesondere wenn Sie jemanden davon überzeugen möchten, dass sich der Code verbessert hat. Das Tool ist kostenlos für ein einzelnes Projekt und bietet bezahlte Pläne für weitere Projekte.

CLI -Werkzeuge

Zusätzlich zu Devtools und Online -Tools gibt es die CLI -Tools (Befehlszeilenschnittstellen), die CSS bei der Prüfung von CSS unterstützen.

Wallace

Eines meiner Lieblings -CLI -Werkzeuge ist Wallace . Geben Sie nach der Installation Wallace ein und geben Sie dann den Standortnamen ein. Die Ausgabe zeigt alle Informationen, die Sie über den CSS -Code der Website wissen müssen. Meine Lieblingsbeschäftigung ist die Anzahl der Verwendungen von! Wichtig und die Anzahl der IDs im Code. Eine weitere prägnante Nachricht ist die höchste Spezifitätszahl und wie viele Selektoren verwendet werden. Dies können rote Fahnen für "schlechte" Codes sein.

Was mir an diesem Tool am meisten gefällt, ist, dass es alle CSS -Code von der Website extrahiert, nicht nur externe Dateien, sondern auch Inline -Code. Aus diesem Grund stimmen die Berichte von CSS -Statistiken und Wallace nicht überein.

CSSCSS

Das CSSCSS -CLI -Tool zeigt an, welche Regeln dieselbe Erklärung teilen. Dies ist nützlich, um den doppelten Code zu identifizieren und die Menge des geschriebenen Codes zu verringern. Ich werde zweimal darüber nachdenken, bevor ich dies tun kann, besonders unter dem heutigen Caching -Mechanismus. Es ist erwähnenswert, dass CSSCS Ruby benötigt.

Andere nützliche Werkzeuge

Andere CSS -Tools werden möglicherweise nicht zur Prüfung verwendet, sind aber immer noch nützlich. Lassen Sie uns diese auch auflisten:

• Farbsortierer - Sortieren Sie die CSS -Farben nach Farbton und dann nach Sättigung.
• CSS -Analysator - Analyse für CSS -Saiten.
• CONTYBLE - Dies ist ein CSS -Komplexitätscode -Checker basierend auf dem CSS -Analysator.
• Extrahieren Sie jetzt CSS - Holen Sie sich alle CSS von einer einzelnen Webseite.
• Holen Sie sich CSS - kriechen Sie alle CSS auf der Seite.
• UCSS - Krabbeln Sie die Website, um nicht verwendete CSS zu identifizieren.

abschließend

CSS ist überall um uns herum und wir müssen es als erstklassige Bürger jedes Projekts betrachten. Was andere an Ihr CSS denken, ist nicht wichtig, aber was Sie davon halten, ist wirklich wichtig. Wenn Ihr CSS organisiert und gut geschrieben ist, verbringen Sie weniger Zeit damit, es zu debuggen und mehr Zeit zu entwickeln. Im Idealfall würden wir alle erziehen, gute CSS zu schreiben, aber es braucht Zeit.

Machen Sie heute den Tag, an dem Sie sich auf CSS -Code konzentrieren.

Ich weiß, dass das CSS -Auditing für alle keine interessante Sache ist. Wenn Sie Ihren Code jedoch mit einem dieser Tools ausführen und versuchen, einen Teil der CSS -Codebasis zu verbessern, wird dieser Artikel seine Aufgabe abgeschlossen.

Ich habe in letzter Zeit mehr Aufmerksamkeit auf den CSS -Code geschenkt und arbeite daran, mehr Entwickler dazu zu bringen, CSS -Code mit mehr Respekt zu schreiben. Ich habe sogar ein neues Projekt bei CSS-Educors.com (Jubel für Hyphenated Domains!) Start, das der Prüfung von CSS gewidmet ist.

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

Das obige ist der detaillierte Inhalt vonTools zur Prüfung von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!