Vor einigen Tagen wurde das CSS-Analysetool CSSLint als Open-Source-Projekt freigegeben. Doch was bringt überhaupt eine Anaylse mit CSSLint? In diesem Artikel stelle ich euch 5 Vorteile vor, die ihr mit CSSLint erreicht.

Was ist CSSLint?

Für diejenigen, die CSSLint bislang noch nicht kannten: Was ist überhaupt CSSLint? Mit Hilfe dieses Tools könnt ihr euren CSS-Quellcode auf Probleme und Ineffizienz analysieren lassen. Es zeigt euch die entsprechenden Zeilen im CSS-Code an und welcher Schwierigkeitsgrad dieser „Fehler“ besitzt.

Es wird zwischen Error und Warnung unterschieden, um so die Dringlichkeit zu kennzeichnen.

CSSLint

CSSLint

Die Vorteile

Wartbarkeit

Ein Quellcode, der übersichtlich und aufgeräumt daher kommt, ist für jeden Entwickler schneller und leichter zu überblicken. Die Einarbeitungszeit, falls einmal ein anderer Entwickler etwas an der CSS-Datei ändern möchte, fällt geringer aus.

Bei CSS ist die Einarbeitungszeit durch die vielen Tools natürlich nicht so hoch, wie bei z.B. Java oder PHP. Dennoch sollte dieser Aspekt nicht aus den Augen verloren werden.

Professionalität

Ein ordentlicher, fehlerfreier und gut strukturierter Quellcode ist in meinen Augen immer ein Indiz dafür, dass sich der Entwickler seiner Sachen bewusst ist und dementsprechend professionell mit der Arbeit umgeht.

Ich gucke gerne mal in den HTML- und CSS-Quellcode von Webseiten, gerne auch mal von „größeren“ Webseiten. Was mir da allerdings manchmal ins Gesicht springt, zeugt nicht gerade von einer soliden Webentwicklung.

Ein aufgeräumter und valider CSS-Quellcode suggeriert somit eine gewisse Professionalität in diesem Segment, die sicherlich auch andere Besucher einer Webseite wahrnehmen. Einen CSS-Validator oder z.B. CSSLint kann nahezu jeder Webbesucher bedienen.

Dateigröße reduzieren

Ein weiterer großer Vorteil ist, die Reduzierung der Dateigröße. CSSLint gibt Hinweise auf CSS-Anweisungen, die unnötig sind.

br.clear { margin: 0px; padding: 0px; }

In diesem Fall wäre die Angabe des BR-Tags unnötig, genauso wie die px-Angabe bei der Verwendung der 0. Werden all diese unnötigen Zeichen aus dem CSS-Quellcode entfernt, lässt sich die Dateigröße um einige Bytes verkleinern. Wer generell seine CSS-Dateien komprimieren lassen möchte, dem sei der Überblick von CSS-Komprimierungstools ans Herz gelegt.

Performancegewinn

Durch die Reduzierung der Dateigröße müssen natürlich auch weniger Bytes übertragen werden. Es sind auf keinen Fall Welten, die dadurch gewonnen werden können, aber es ist eine von vielen kleinen Stellschrauben in Sachen Performance.

Neben der Dateireduzierung werden auch ineffiziente CSS-Angaben von CSSLint erkannt. Sobald diese entfernt wurden, lassen sich die CSS-Anweisungen vom Browser schneller interpretieren. Auch hier der Hinweis, Sekunden werden damit nicht gewonnen.

Unbeabsichtigte Fehler erkennen

CSSLint: Fehler und Warnungen

CSSLint: Fehler und Warnungen

Wer viel CSS-Code in seinen Dateien verwaltet, dem fallen vermutlich kleinere Fehler nicht auf, da man „den Wald vor lauter Bäumen nicht mehr sieht“. Es kommt ja doch hin und wieder einmal vor, dass man an einer Stelle im Quellcode etwas ändert und dann das Telefon klingelt oder sonstige Ablenkungen eintreten.

So können schnell Fehler entstehen, wie z.B. ein schließendes Semikolon fehlt vor einer weiteren Angabe. Solche Fehler bei mehren Hundert Zeilen Quellcode zu erkennen wird schwierig.

Fazit

Ich hoffe, ich konnte euch mit den oben aufgezählten Vorteilen davon überzeugen, einen Blick auf CSSLint zu werfen und euren CSS-Quellcode durch das Tool überprüfen zu lassen. Wie seht ihr die Quellcode-Analyse und die dadurch gewonne Qualitätssicherung bzw. Qualitätssteiergung? Führt ihr selbst Codeanalysen durch?