Eine Einführung in CSS-Tests mit SonarQube

Der folgende Beitrag stammt von David Racodon. David trägt zu diesem Open-Source-Tool zur Codequalität bei, über das er Ihnen alles erzählen wird. Ich hatte es bisher noch nicht gehört, aber ich weiß, dass viele Leute an Werkzeugen interessiert sind, die ihnen helfen, ihr CSS im Griff zu behalten. Dies ist ein bisschen wie CSS lint, aber formalisiert in einer Benutzeroberfläche, die die Codequalität für ein ganzes Projekt verwaltet.

Die Qualität von CSS verschlechtert sich im Laufe der Zeit tendenziell. Sie beginnen ein neues Projekt und es ist blitzsauber. Aber langsam, durch Änderungen und Wartung, häufen sich technische Schulden. Es wird noch schlimmer bei Projekten mit vielen verschiedenen Betreuern oder Mitarbeiterwechsel.

Die überwiegende Mehrheit der CSS-Entwickler, die ich getroffen habe, legen Wert auf die Sauberkeit ihres Codes und haben auch das Gefühl, dass sie es besser machen könnten.

Ich arbeite an und mit einem Tool namens SonarQube, das speziell für Entwickler zur Verbesserung der Codequalität entwickelt wurde.

Was ist SonarQube?

SonarQube liefert Feedback zur Codequalität für eine Vielzahl von Sprachen, einschließlich CSS. Eine Weboberfläche bietet einen Überblick über die Codequalität Ihres Projekts.

Von dort aus können Sie tiefer eintauchen und SonarQube kann Ihnen Probleme direkt im Code anzeigen, z. B. potenzielle Fehler wie doppelte Eigenschaften

Oder doppelte Selektoren über Dateien hinweg

Oder eine andere der sieben Todsünden der Entwickler.

Es gibt eine Demo dieser Funktionen, die Sie sich ebenfalls ansehen können.

Wo anfangen? Neuer Code.

Was wäre, wenn Sie Ihren Code jetzt analysieren würden? Wenn Sie Glück haben, haben Sie nur ein paar Dutzend Probleme. Aber was, wenn Sie ein paar hundert haben? Womit sollten Sie dann anfangen? Lassen Sie es uns anders formulieren. Wenn Ihre Badewanne ein Leck hat, würden Sie zuerst den Boden wischen oder versuchen, das Leck zu reparieren? Ich glaube (oder hoffe zumindest), dass die meisten von Ihnen versuchen würden, zuerst das Leck zu reparieren.

SonarQube bietet, was Sie brauchen, um sich auf neuen Code zu konzentrieren: die Differentialansichten. Sie ermöglichen es Ihnen, den aktuellen Zustand Ihres Codes mit einem früheren Zustand zu vergleichen. (Ein früherer Zustand kann die letzte Analyse, der Beginn des Sprints, eine Produktionsversion usw. sein) und neue Probleme hervorzuheben.

Im obigen Beispiel würden Sie einfach auf +9 klicken, um die 9 neuen Probleme anzuzeigen, die seit der letzten Analyse eingeführt wurden, und mit deren Behebung beginnen.

Welche Art von CSS-Prüfungen führt es durch?

Derzeit sind über 50 verfügbar. Hier sind nur einige Beispiele

Potenzielle Fehler

• Doppelte Eigenschaften: Schlechte Kopie und Einfügen? Für Cross-Browser-Unterstützung gedacht? Ein Kommentar wäre in diesem Fall jedoch schön.
• Eigenschaftswerte sollten gültig sein, sonst werden sie von Browsern ignoriert. Nicht nur ein grundlegender CSS2-Validator, sondern auch CSS3 und von Browsern üblicherweise akzeptierte Werte werden berücksichtigt. Sehen Sie die vollständige Liste der Validatoren.

Coding-Richtlinien

• Selektoren sollten einer Namenskonvention folgen
• Einheiten für Nullwerte sollten entfernt werden
• Stylesheet sollten nicht zu viele Regeln enthalten

Cross-Browser-Kompatibilität

• Standardeigenschaften sollten zusammen mit herstellerspezifischen Präfixen angegeben werden
• Veraltete Systemfarben sollten nicht verwendet werden

Ausprobieren

SonarQube ist Open Source und kostenlos. Um Ihren Code in weniger als zwei Minuten analysieren zu lassen, kann ein SonarQube-Paket, das mit dem CSS-Plugin und dem Analyzer gebündelt ist, hier heruntergeladen werden (sehen Sie sich den Download ZIP auf der rechten Seite an).

Oder sehen Sie sich die ausführliche Dokumentation an.

Mehr erfahren

Überzeugt? Gehen Sie weiter, indem Sie die Analyse Ihres Codes mit Ihrem bevorzugten Continuous-Integration-Dienst automatisieren. Es gibt auch Plugins für JavaScript, HTML und andere Sprachen. Sie können es verwenden, um Probleme zu überprüfen, Ihre technischen Schulden zu bewerten und vieles mehr.

Feedback zum CSS-Plugin

Zusammen mit Tamas Kende trage ich zum SonarQube CSS-Plugin bei. Wir sind keine CSS-Gurus und sind uns sicher, dass die bestehenden Regeln verbessert und neue Regeln hinzugefügt werden könnten. Ihr Feedback ist mehr als willkommen! Posten Sie es in die SonarQube-Benutzergruppe oder pingen Sie uns auf Twitter unter @kalidasya und @DavidRacodon an.