4 Tools zur Überprüfung und Optimierung von CSS

Sobald Ihre Website zu wachsen beginnt, wird auch Ihr Code größer. Wenn Ihr Code erweitert wird, kann es plötzlich schwierig werden, CSS zu verwalten, und Sie können am Ende eine CSS-Regel mit einer anderen überschreiben. Dies macht die Sache komplizierter und Sie werden wahrscheinlich mit vielen Fehlern enden.

Wenn Ihnen das passiert, ist es Zeit für Sie Überprüfen Sie das CSS Ihrer Site. Durch die Überwachung Ihres CSS können Sie Teile Ihres CSS identifizieren, die nicht optimiert sind. Sie können die Stylesheet-Dateigröße auch reduzieren, indem Sie Codezeilen entfernen, die die Leistung Ihrer Website beeinträchtigen.

Hier sind 5 gute Tools, mit denen Sie CSS überprüfen und optimieren können.

Typ-O-Matic

Typ-O-Matic ist ein Firebug-Plugin zur Analyse von Schriftarten, die in einer Website verwendet werden. Dieses Plugin enthält einen visuellen Bericht in einer Tabelle, der die Eigenschaften der Schriftart, z. B. die Schriftfamilie, Größe, Gewicht, Farbe sowie die Häufigkeit der Verwendung der Schriftart auf der Webseite enthält. Über die Berichtstabelle können Sie die Verwendung der Schriftart ganz einfach optimieren, unnötiges entfernen oder zu ähnliche Stile kombinieren.

CSS-Fussel

CSS-Fussel ist ein fusseln Werkzeug, das die CSS-Syntax auf der Grundlage spezifischer Parameter analysiert, die sich auf Leistung, Zugänglichkeit und Kompatibilität Ihres CSS beziehen. Sie wären mit den Ergebnissen überrascht, erwarten Sie viele Warnungen in Ihrem CSS. Diese Fehler helfen Ihnen jedoch, die CSS-Syntax zu korrigieren und effizienter zu machen. Außerdem werden Sie auch ein besserer CSS-Schreiber sein.

CSS ColorGuard

CSS ColorGuard ist ein relativ neues Werkzeug. Es ist als Node-Modul aufgebaut und läuft auf allen Plattformen: Windows, OS X und Linux. CSS ColorGuard ist ein Befehlszeilentool, das Sie benachrichtigt, wenn Sie ähnliche Farben in Ihrem Stylesheet verwenden. z.B. # f3f3f3 ist ziemlich nah an # f4f4f4, Vielleicht möchten Sie auch die beiden zusammenführen. CSS ColorGuard ist konfigurierbar. Sie können sowohl den Ähnlichkeitsschwellenwert als auch die Farben festlegen, die das Werkzeug ignorieren soll.

CSS Dig

CSS Dig ist ein Python-Skript und arbeitet lokal auf Ihrem Computer. CSS Dig führt eine gründliche Prüfung in Ihrem CSS durch. Es liest und kombiniert Eigenschaften, z. Alle Hintergrundfarbendeklarationen werden unter dem Hintergrundabschnitt angezeigt. Auf diese Weise können Sie auf der Grundlage des Berichts leicht Entscheidungen treffen, wenn Sie versuchen, Ihre CSS-Syntax zu standardisieren, z. Möglicherweise finden Sie mit den folgenden Farbangaben Farbübergreifende Stile.

 Farbe: #ccc; Farbe: #cccccc; Farbe: #CCC; Farbe: #CCCCCC; 

Diese Farbdeklarationen machen dasselbe. Sie könnten genauso gut mit dem gehen #ccc oder mit der Hauptstadt #CCC als Standard. CSS Dig kann diese Redundanz auch für andere CSS-Eigenschaften verfügbar machen, und Sie können Ihren Code konsistenter machen.