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 個(gè)標(biāo)識(shí)符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 個(gè)標(biāo)識(shí)符*/</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 條規(guī)則，1 個(gè)聲明=> 內(nèi)聚性= 1 */ .text-center { text-align: center; } /* 1 條規(guī)則，8 個(gè)聲明=> 內(nèi)聚性= (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>{ // 不要超過(guò)4095 個(gè)選擇器，否則IE9 將刪除任何后續(xù)規(guī)則"selectors.total": 4095, // 我們不需要ID 選擇器"selectors.id.total": 0, // 如果出現(xiàn)除這些顏色之外的任何其他顏色，則報(bào)告錯(cuò)誤！ "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!