die 10 besten Tools zum Formatieren und Optimieren von CSS-Dateien

Die Formatierung und Optimierung von CSS-Dateien bereitet Webentwicklern mit Hilfe dieser handverlesenen Tools keine Kopfschmerzen mehr!

Seit ihrer Einführung werden Cascading Style Sheets (CSS) häufig verwendet, um das Erscheinungsbild von Webseiten zu gestalten. Sie umfassen die Definition von Farben, Layouts, Animationen und Schriftarten. Da CSS unabhängig von HTML ist, können Sie die Darstellung einer Webseite problemlos an verschiedene Gerätetypen mit unterschiedlichen Bildschirmgrößen anpassen, ohne etwas am Inhalt der Seite ändern zu müssen

CSS wird aufgrund der Art und Weise, wie die Eigenschaftswerte auf die Inhaltshierarchie angewendet werden, als kaskadierendes Stylesheet bezeichnet. Untergeordnete Elemente können die Eigenschaftswerte ihrer übergeordneten Elemente entweder erben oder außer Kraft setzen. Diese Möglichkeiten werden über ein Modell bereitgestellt, das auf einem hierarchischen Wirkungsbereich basiert. Das Problem bei diesem Modell ist, dass es die Leistung einer Website ernsthaft beeinträchtigen kann, wenn es nicht richtig eingesetzt wird

Und niemand mag eine schwerfällige Website. Deshalb entstand der Bedarf an CSS-Optimierung, zusammen mit einer neuen Generation von Tools, die speziell dafür entwickelt wurden, CSS-Dateien so ordentlich und schnell wie möglich zu machen

CSS-Optimierung kann auf viele Arten erfolgen: CSS-Dateien können verkleinert, gesäubert, auf Korrektheit getestet oder validiert, aufgeräumt, formatiert, um den Code zu verstehen, und, ganz allgemein, für ein besseres Benutzererlebnis optimiert werden. Wir haben eine Auswahl der besten Tools für jede dieser Aufgaben getroffen

# CSS Tuning Tools

CSS verkleinern

CSS Minify ist ein einfaches Tool zur CSS-Minifizierung: der Prozess, bei dem das verschönerte, lesbare, wohlgeformte CSS genommen und alle Abstände, Einrückungen, Zeilenumbrüche und Kommentare entfernt werden. Das so reduzierte CSS kann auch ohne diese Elemente erfolgreich verwendet werden. Außerdem macht das Minifying das CSS schwerer lesbar und hält so Code-Diebe davon ab, Ihre hart erarbeiteten Stylesheets zu stehlen

Wenn Sie Ihren Code minifizieren, ist es ratsam, eine verschönerte (nicht-minifizierte) Version davon aufzubewahren, denn Sie müssen sie in Zukunft lesen können, falls Sie Änderungen daran vornehmen müssen

Topcoat

Topcoat ist kein Tool zur Optimierung Ihres CSS. Es handelt sich vielmehr um eine Open-Source-CSS-Bibliothek, die mit Blick auf die Geschwindigkeit entwickelt wurde. Sie ist ein Nachkomme der von Adobe für Brackets entwickelten Designsprache Edge Reflow

Topcoat enthält PSD- und viele andere Design-Artefakte sowie eine Sammlung von einfachen und sauberen SVG-Symbolen und Style Guides. Außerdem bietet es Benchmarking-Tools und die ausgefallene Schriftfamilie Adobe Source Sans Pro

Code Verschönerer

Code Beaut ifier basiert auf CSS Tidy, dem beliebten Open-Source-CSS-Parser und -Optimierer. Sie können den zu verarbeitenden CSS-Code in einen Textbereich einfügen oder ihn von einer URL abrufen. Nachdem es seine Arbeit getan hat, zeigt es den optimierten Code zusammen mit einer Liste der vorgenommenen Änderungen an. Sie können den geänderten Code in die Zwischenablage kopieren oder ihn zur späteren Verwendung in einer Datei speichern

Das Tool bietet eine umfangreiche und umfassende Liste von Optionen, mit denen Sie die Ergebnisse an Ihre Wünsche anpassen können. So bietet es beispielsweise fünf Optionen für die Komprimierung, die von einer geringen bis zur höchsten Komprimierung reichen. Mit anderen Optionen können Sie unter anderem die Sortierung, andere Formen der Komprimierung und die Entfernung unnötiger Elemente festlegen

CSS Nano

Ein weiteres Tool zum Verkleinern von CSS ist CSS Nano. Es basiert auf einem Tool, das für die Umwandlung von Stilen mit JavaScript entwickelt wurde, PostCSS genannt. Dank der Plugin-Architektur dieses Tools konnten die Schöpfer von CSS Nano es aus kleinen Modulen mit eingeschränkten Funktionen zusammenstellen

Standardmäßig nimmt CSS Nano die CSS-Datei, die Sie ihm zur Bearbeitung übergeben, und nimmt nur sichere Optimierungen daran vor. Aber das Tool bietet auch Optionen, um die Komprimierung bis an die Grenzen zu treiben. Die Funktionsweise des CSS bleibt unverändert, aber unnötige Leerzeichen werden entfernt. Auch die Bezeichner werden komprimiert und die unnötigen Definitionen werden vollständig entfernt

# CSS Cleaning Tools

Verschmutztes Markup

Dirty Markup macht genau das Gegenteil der Minifier: Es nimmt den Code, den Sie ihm geben, und bereinigt ihn, so dass er leicht zu lesen ist – solange es sich um gültigen CSS-Code handelt. Der resultierende Code ist perfekt verschönert

Die Entwickler von Dirty Markup geben an, dass fast eine Milliarde Codezeilen (nicht nur CSS, sondern auch HTML und JavaScript) mit ihrem Tool verschönert worden sind

Dust-Me Selektoren

Dust-Me Selectors wurde entwickelt, um eine Website zu scannen und ungenutzte CSS-Selektoren zu finden, um sie zu entfernen und die Größe Ihres Codes zu reduzieren. Es funktioniert als Zusatzprogramm für Firefox und Opera

Dust-Me Selectors kann auf einer einzelnen Seite arbeiten oder eine ganze Sitemap durchsuchen und zeigt Ihnen die Details aller gefundenen Stylesheets und Selektoren an, geordnet nach verwendet und nicht verwendet. Die Firefox-Version ist in der Lage, Seiten automatisch zu scannen, während Sie surfen. Sie sollten dabei nur beachten, dass Mutationsereignisse zusätzliche Scans auslösen können, wenn sich die Seite ändert

CSS Lint

CSS Lint bietet eine minimalistische Benutzeroberfläche: nur ein großes Textfeld, in das Sie Ihren CSS-Code einfügen, um ihn zu “lintisieren”. Es wird nicht gesagt, was der Linting-Prozess mit Ihrem Code macht, aber eine Warnmeldung oben auf der Seite weist Sie darauf hin, dass die Ergebnisse Sie verletzen werden – und Ihnen helfen werden, besser zu programmieren

CSS Lint prüft die Syntax Ihres Codes anhand einer Reihe von vordefinierten Regeln. Auf diese Weise erkennt es potenzielle Ineffizienzen und Fehler. Mit ein wenig Anpassungsarbeit bietet CSS Lint Ihnen die Möglichkeit, die Regeln auszuwählen, die Sie durchsetzen möchten

# CSS Testing/Validation Tools

CSS Stresstest

CSS Stress Test funktioniert wie ein Bookmarklet (ein kleines Stück JavaScript-Code), das Stresstests auf das CSS einer beliebigen Webseite anwendet. Das Tool indiziert alle Elemente im CSS-Code und ihre Klassen. Dann beginnt es mit dem Stresstest, indem es die Klassen eine nach der anderen entfernt und misst, wie lange es dauert, die Seite zu scrollen

Wenn sich die Zeit, die die Seite zum Scrollen benötigt, erheblich verkürzt, wenn ein Selektor entfernt wird, dann stellt dieser Selektor einen problematischen Bereich dar, der entfernt oder korrigiert werden sollte. Dieses Tool funktioniert vor allem mit ausgefallenem CSS3-Code, der abgerundete Ecken, Deckkraft, Textschatten und Rahmenschatten ermöglicht. All diese Effekte lassen sich in CSS3 erzielen, ohne dass Sie Bilder zerschneiden, spezielle Skripte verwenden oder zusätzliche Elemente hinzufügen müssen

Aber CSS3 kann auch Probleme verursachen: eine einzige Eigenschaft kann zu sichtbaren Neuaufrollungen und Problemen beim Scrollen der Seite führen. An dieser Stelle kann der CSS-Stresstest sehr nützlich sein

CSS-Validierungsdienst

CSS Validation Service validiert kaskadierende Stylesheets und (X)HTML mit Stylesheets. Das Tool prüft auf Eigenschaften, die in allen CSS-Versionen definiert sind. Um eine Seite oder eine CSS-Datei zu validieren, müssen Sie nur deren URI (Uniform Resource Identifier) eingeben und einige grundlegende Optionen festlegen, wie z.B. das Profil (Art des zu prüfenden CSS), das Zielgerät, die anzuzeigenden Warnungen und die Vorgehensweise bei Problemen mit Herstellererweiterungen (Fehler oder Warnungen anzeigen)

Sobald Sie alle Einstellungen vorgenommen haben, klicken Sie auf die Schaltfläche Prüfen und warten Sie auf die Ergebnisse. Der abschließende Bericht zeigt Ihnen eine umfassende Liste von Fehlern und Warnungen, in der Sie ungültige Eigenschaften, Syntaxfehler, unbekannte Herstellererweiterungen und viele andere Probleme finden, die Sie in Ihrem CSS korrigieren sollten, um es zu optimieren. Der Bericht zeigt Ihnen auch alle gültigen CSS-Codes auf Ihrer Seite an

BackstopJS 3

BackstopJS 3 automatisiert visuelle Regressionstests von responsiven Web-Benutzeroberflächen. Es vergleicht dazu eine Reihe von DOM-Screenshots. Es bietet eine aufregende Liste von Funktionen: Es gibt ein In-Browser-Reporting, außerdem Layout-Einstellungen für Druck und Bildschirm und einige andere spezielle Funktionen, wie Display-Filterung und Referenz/Test/Visual Diff Inspector

Mit Puppeteer und ChromyJS-Skripten kann BackstopJS 3 Benutzerinteraktionen simulieren und ist in der Lage, Tests mit Chrome Headless zu rendern. Um plattformübergreifende Rendering-Probleme zu beseitigen, verfügt es außerdem über integriertes Docker-Rendering. Das Tool kann global oder lokal als eigenständiges Paket ausgeführt werden und arbeitet gut mit CI und Source Control zusammen. BackstopJS 3 ist sehr einfach zu bedienen: mit nur drei Befehlen kommen Sie schon recht weit

Fazit

Ich hoffe, die oben genannten CSS-Tools helfen Ihnen dabei, die CSS-Dateien Ihrer Webanwendung für eine bessere Leistung zu optimieren. Wenn Sie daran interessiert sind, CSS für Fortgeschrittene zu lernen, dann sollten Sie sich diesen brillanten Kurs ansehen.