Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwacht

Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nur wenige Personen schreiben darüber, wie sie die Qualität der Codebasis messen . Natürlich haben wir hervorragende Tools zur Codeüberprüfung wie Stylelint und CSSlint, können jedoch nur Fehler auf Mikroebene verhindern. Verwenden Sie falsche Farbnotation, fügen Sie Anbieter -Präfixe hinzu, wenn der Autoprefixer bereits verwendet wird, schreiben Sie Selektoren auf inkonsistente Weise ... usw.

Wir sind immer auf der Suche nach Möglichkeiten, wie CSS geschrieben wird: OOCSS, BEM, SMACSS, ITCSS, Praktisches und mehr. Andere Entwicklungsgemeinschaften scheinen sich jedoch von einfachen Code-Checking-Tools bis hin zu Tools wie Sonarqube und PHP Messdetektor entwickelt zu haben, während der CSS-Community immer noch mehr detailliertere Überprüfungswerkzeuge als flache Regeln für flache Fusseln fehlt. Dazu habe ich Projekt Wallace erstellt, eine Reihe von Tools zum Überprüfen und Durchsetzen der CSS -Qualität.

Was ist Project Wallace?

Im Herzen des Projekts befindet sich Wallace eine Reihe von Tools, darunter eine Befehlszeilenschnittstelle, ein Codeinspektor, ein Analysator und ein Reporter.

Hier finden Sie einen kurzen Überblick über diese Tools.

Befehlszeilenschnittstelle

Auf diese Weise können Sie die CSS -Analyse in der Befehlszeile ausführen und Statistiken für alle CSS erhalten, die Sie ihm zur Verfügung stellen.

Constystble Code Checker

Dies ist ein Codenduch, der speziell für CSS entwickelt wurde. Basierend auf den von Wallace generierten Analyseergebnissen können Sie Schwellenwerte festlegen, die nicht überschritten werden sollten. Beispielsweise sollte eine einzelne CSS -Regel nicht mehr als 10 Selektoren enthalten, oder die durchschnittliche Komplexität der Selektor sollte nicht höher als 3 sein.

Analysator

Extrakt-CSS, wie der Name vorschlägt: Extrahieren Sie alle CSS aus einer Webseite, damit wir sie zur Analyse an projectWallace.com senden können.

Reporter

Alle Analyseergebnisse für Extrakt -CSS werden an projectWallace.com gesendet und das Dashboard enthält Berichte aller Daten. Es ähnelt den CSS -Statistiken, verfolgt jedoch mehr Metriken und speichert die Ergebnisse im Laufe der Zeit und zeigt sie im Dashboard an. Es zeigt auch den Unterschied zwischen den beiden Zeitpunkten sowie vielen anderen Funktionen.

Analysieren Sie die CSS -Komplexität

Es gibt nicht viele Artikel über die Komplexität von CSS, aber derjenige, der Harry Roberts (CSSWIZARDRY) hat, hat mich beeindruckt. Der Punkt ist, dass jeder CSS -Selektor im Grunde genommen eine Reihe von IF -Aussagen ist, die mich an die Schleifenkomplexität der Methode erinnern, die ich bei einem Informatikkurs manuell berechnen musste. Harrys Artikel ist für mich viel Sinn, weil er ein Modul schreiben kann, um die Komplexität eines CSS -Selektors zu berechnen - natürlich nicht mit Spezifität zu verwechseln, da er in Bezug auf die Komplexität eine völlig andere Frage ist.

Grundsätzlich kann die Komplexität in CSS in vielen Formen kommen, aber hier sind einige der Dinge, denen ich bei der Überprüfung von Codebasen am meisten beachtet habe:

CSS -Auswahlschleife Komplexität

Jeder Teil des Selektors bedeutet, dass der Browser eine andere If -Anweisung ausführen muss. Längere Selektoren sind komplexer als kürzere Selektoren. Sie sind schwerer zu debuggen, und die Parsen von Browser ist langsamer und schwerer zu bedecken.

 <code>.my-selector {} /* 1 个标识符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 个标识符*/</code>

Anzahl der Deklarationen pro Regelsatz (Zusammenhalt)

Regelsätze, die viele Deklarationen enthalten, sind komplexer als Regelsätze, die eine kleine Anzahl von Deklarationen enthalten. Die Popularität von funktionalen CSS -Frameworks wie Rückenwind und Tachyons kann auf die relative "Einfachheit" von CSS selbst zurückgeführt werden.

 <code>/* 1 条规则，1 个声明=> 内聚性= 1 */ .text-center { text-align: center; } /* 1 条规则，8 个声明=> 内聚性= (1 / 8) = 0.125 */ .button { background-color: blue; color: white; padding: 1em; border: 1px solid; display: inline-block; font-size: normal; font-weight: bold; text-decoration: none; }</code>

Anzahl der Quellcodezeilen

Je mehr Code, desto mehr Komplexität. Jede Codezeile wird beibehalten und daher in den Bericht enthalten.

Durchschnittliche Anzahl der Selektoren pro Regel

Eine Regel enthält normalerweise 1 Selektor, aber manchmal mehr. Dies macht es schwierig, einige Teile des CSS zu löschen, was es komplizierter macht.

Alle diese Metriken können mit Constyble, dem von Project Wallace verwendeten CSS-Komplexitätsprüfer, in seinem Werkzeugsatz, mit Code überprüft werden. Nachdem Sie die Grundlinie für die Metrik definiert haben, installieren Sie einfach Constyble und richten Sie die Konfigurationsdatei ein. Hier ist ein Beispiel für die Konfigurationsdatei, die ich direkt aus dem Constyble Readme extrahiert habe:

 <code>{ // 不要超过4095 个选择器，否则IE9 将删除任何后续规则"selectors.total": 4095, // 我们不需要ID 选择器"selectors.id.total": 0, // 如果出现除这些颜色之外的任何其他颜色，则报告错误！ "values.colors.unique": ["#fff", "#000"] }</code>

Das Beste daran ist, dass Constyble auf Ihrem endgültigen CSS läuft, sodass es nach all der Vorverarbeitungsarbeiten, die Sie von SASS, LEWS, POSTCS oder einem anderen von Ihnen verwendeten Präprozessor haben, erst ausgeführt werden. Auf diese Weise können wir eine intelligente Überprüfung der Gesamtzahl der Selektoren oder der durchschnittlichen Komplexität des Selektors durchführen. Wie bei jedem Codeinspektor können Sie sie als Teil des Build -Schritts verwenden, und wenn Probleme auftreten, wird Ihr Build fehlschlagen.

Die Ernte der Verwendung von Projekt Wallace

Nachdem ich Projekt Wallace für eine Weile verwendet hatte, fand ich es großartig, die Komplexität zu verfolgen. Obwohl es hauptsächlich für diesen Zweck verwendet wird, ist es auch eine gute Möglichkeit, subtile Fehler zu finden, die Codeinspektoren in CSS möglicherweise nicht finden, da sie auf vorverarbeiteten Code prüfen. Hier sind einige interessante Dinge, die ich gefunden habe:

• Ich habe aufgehört, die Anzahl der Benutzergeschichten zu zählen, die während des Sprint inkonsistente Farben auf der Website reparieren müssen. Es gibt seit mehreren Jahren Projekte und Menschen, die in das Unternehmen und aus dem Unternehmen kommen: Dies ist ein Geheimnis, um jede Markenfarbe auf der Website schief zu machen. Glücklicherweise haben wir Constylble und Project Wallace um die Anerkennung der Stakeholder implementiert, da wir in der Lage waren, in neuen Projekten sehr genau zu sein, dass die Marke unserer Kunden sehr genau war. Constyble hindert uns daran, Farben hinzuzufügen, die sich nicht im Stilhandbuch befinden.
• Ich habe das Projekt Wallace Webhooks in einem Projekt installiert, bei dem mein ehemaliger Arbeitgeber arbeitet. Jedes Mal, wenn Sie Ihrem Projekt ein neues CSS hinzufügen, sendet es das CSS an ProjectWallace.com und wird sofort im Dashboard des Projekts angezeigt. Dies erleichtert leicht zu finden, wenn dem CSS ein bestimmter Auswahl- oder Medienabfrage hinzugefügt wird.
• Das CSS-Tricks-Neugestaltung Anfang dieses Jahres bedeutete einen erheblichen Rückgang der Komplexität und Dateigröße. Die Neugestaltung ist großartig und kann analysiert werden. Es gibt Ihnen die Möglichkeit, die Situation hinter den Kulissen genauer zu betrachten und herauszufinden, wie die Autoren ihre CSS verändert haben. Wenn Sie wissen, welche Abschnitte nicht für die Website funktionieren und welche neuen Abschnitte sich bewerben, können Sie eine Vorstellung davon geben, wie schnell CSS wächst.
• Ein großes internationales Unternehmen in den Niederlanden hatte einst mehr als 4095 Selektoren in einer CSS -Datei. Ich weiß, dass sie aktiv aufstrebende Märkte entwickeln und den Internet Explorer 8 unterstützen müssen. IE9 lasst nicht alle CSS nach 4095 Selektoren, sodass die meisten ihrer CSS bei älteren IE -Browsern nicht angewendet werden. Ich habe ihnen eine E -Mail gesendet und sie haben das Problem überprüft und es sofort behoben, indem sie das CSS in zwei Dateien aufteilten.
• GitLab verwendet derzeit über 70 einzigartige Schriftgrößen. Ich bin mir ziemlich sicher, dass ihre Typografie kompliziert ist, aber das scheint ein bisschen zu ehrgeizig zu sein. Vielleicht liegt es an ein paar CSS von Drittanbietern, aber es ist schwer zu beurteilen.
• Wenn ich Projekte von anderen Entwicklern erbte, überprüfe ich die CSS -Analyseergebnisse, um die Schwierigkeiten des Projekts zu verstehen. Verwenden sie es in großen Mengen! Wichtig? Ist die durchschnittliche Regelsatzgröße leicht zu verstehen oder fügt sie mehr als 20 Deklarationen pro Regelsatz hinzu? Was ist die durchschnittliche Auswahllänge und sind sie schwer zu bedecken? Es wäre schön, nicht auf .komplex-selector-override \ [class \] [class] ... [Klasse] zurückzugreifen.
• Ein cleverer Trick, um zu prüfen, ob das Zoom-Out effektiv ist, besteht darin, dass Constyble prüft, ob der Zeilennummernindikator für den Code nicht größer als 1 ist. CSS schrumpft bedeutet, dass alle CSS in einer Zeile platziert sind, sodass die Anzahl der Codezeilen gleich 1 sein sollte!
• Was die ganze Zeit in meinem anderen Projekt geschah, war das Versäumnis, zu schrumpfen. Ich weiß nicht, bis der Unterschied im Projekt Wallace mir viele Farben zeigt, die plötzlich wie #AAAAA anstelle von #AAAA ausgeschrieben werden. Das ist an sich keine schlechte Sache, aber es passiert in so vielen Farben gleichzeitig, dass etwas schief gelaufen sein muss. Eine kurze Umfrage ergab, dass ich beim Schrumpfen einen Fehler gemacht habe.
• Stackoverflow bietet vier einzigartige Möglichkeiten, weiße Farben zu schreiben. Dies ist nicht unbedingt eine schlechte Sache, aber es kann ein Zeichen dafür sein, dass CSS -Minifikationsprogramme in Designsystemen beschädigt oder inkonsistent sind.
• Facebook.com hat über 650 einzigartige Farben in ihrem CSS. Das kaputte Designsystem klingt auch nach einer Möglichkeit.
• Ein Projekt von meinem ehemaligen Arbeitgeber zeigt Eingabe [Typ = Kontrollkästchen]: Überprüft .Label -Eingabe [Typ = Radio] Etikett: Fokus: AFT ist der komplexeste Selektor. Nach einer genaueren Inspektion stellten wir fest, dass dieser Selektor Eingaben in einer anderen Eingabe lokalisiert. Dies ist in HTML unmöglich, und wir denken, wir müssen das Komma in CSS vergessen haben. Kein Code -Checker warnt uns davor.
• Das Nestieren in CSS-Präprozessoren ist cool, kann aber falsche Dinge wie @media (max-Width: 670px) und (max-Width: 670px) verursachen , wie ich in syntax.fm gefunden habe.

Für Project Wallace ist dies nur die Spitze des Eisbergs. Sobald Sie Ihre CSS analysieren, gibt es mehr zu lernen und zu entdecken. Schauen Sie sich nicht nur Ihre eigenen Statistiken an, sondern auch, was andere tun.

Ich habe meine Konstypon -Konfiguration als Gesprächsthema mit weniger erfahrenen Entwicklern verwendet, um zu erklären, warum sie nicht auf komplexen CSS -Blöcken aufbauen. Wenn wir mit anderen Entwicklern diskutieren, warum wir bestimmte CSS -Schreibmethoden vermeiden oder fördern sollten, können wir das Wissen übertragen. Es hilft mir auch, meine Füße auf dem Boden zu halten. Die PHP -Entwickler, die nur helfen wollen, was ich seit Jahren getan habe, hat mich überdenken lassen, warum ich die Dinge so mache, wie ich es tue.

Mein Ziel ist es nicht, jemandem zu sagen, was in CSS richtig oder falsch ist, sondern Tools zu erstellen, damit Sie überprüfen können, was für Sie und Ihre Kollegen funktioniert. Project Wallace ist hier, um uns zu helfen, die CSS zu verstehen, die wir schreiben.

Das obige ist der detaillierte Inhalt vonAuf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!