CSS-Debugging und Optimierung: Code-Qualität-Tools

Verbesserung der Qualität des CSS -Code: Detaillierte Erläuterung von Stylelint- und UNCSS -Tools

Kernpunkte

Stylelint und UNCSS sind zwei praktische Tools zur Analyse der Qualität des CSS -Code. Stylelint -Überprüfungen nach potenziellen Problemen im Code, z. B. Räume anstelle von Registerkarten für die Eindrückung; Beide Tools basieren auf node.js und können mit NPM installiert werden. Für kleine Websites können viele Tool -Tagging -Probleme ignoriert werden, aber für große Projekte helfen sie, Wartungsprobleme zu vermeiden. Taskläufer oder Build -Systeme wie Grunzen, Gulp und Webpack können Verbindungen automatisieren und Aufgaben optimieren, wodurch die Menge an Arbeiten reduziert werden, die von Tools wie Stylelint und UNCSS verwendet werden. Diese Tools können über Plugins in Grunzen, Gulp oder Webpack integriert werden. CSS -Debugging und Optimierung von Tools für die Codequalität können die Ladegeschwindigkeiten der Website verbessern. Dies ist entscheidend, da langsame Websites zu einer schlechten Benutzererfahrung führen und sich negativ auf das Suchmaschinenranking der Website auswirken können. (Die folgende Einführung in die CSS -Code -Qualitätstools wird aus Tiffanys neuem Buch "CSS Master, Second Edition")

ausgerichtet Auf dem Weg zum CSS -Meister müssen Sie verstehen, wie Sie den CSS -Code debuggen und optimieren können. Wie diagnostizieren und beheben Sie Rendering -Probleme? Wie stelle ich sicher, dass Ihr CSS den Endbenutzern keine Leistungsverzögerung verursacht? Und wie können Sie die Qualität des Codes sicherstellen?

Es ist wichtig zu verstehen, welche Werkzeuge Ihnen helfen können, sicherzustellen, dass das Front-End ordnungsgemäß ausgeführt wird.

In diesem Artikel werden wir einige Tools zur Analyse der Qualität des CSS -Codes diskutieren. Wir werden uns auf die folgenden zwei Tools konzentrieren:

Stylelint UNCSS Stylelint ist ein Code -Style -Checking -Tool (Linter). Linter ist eine Anwendung, die potenzielle Probleme im Code überprüft, was Code -Konventionen erzwingt, z. Stylelint kann Probleme wie Wiederholungsauswahl, ungültige Regeln oder unnötige Spezifität finden. Diese Probleme haben den größten Einfluss auf die Wartbarkeit von CSS.

Auf der anderen Seite prüft UNCSS nach nicht verwendeten Selektoren und Stilregeln in CSS. Es analysiert die Liste mit Stylesheet und HTML -Seitenliste und gibt eine CSS -Datei mit nicht verwendeten Regeln zurück.

Beide Tools verwenden node.js und können mit NPM installiert werden.

Wenn Sie sich mit kleinen Websites befassen (z. B. persönliche Blogs oder einige Seiten mit seltenen Updates), können Sie viele der von diesen Tools markierten Themen sicher ignorieren. Sie werden Zeit damit verbringen, umzuarbeiten, aber mit wenig Erfolg in Bezug auf Wartbarkeit und Geschwindigkeit. Für große Projekte sind sie jedoch von unschätzbarem Wert. Sie helfen Ihnen dabei, Probleme mit der Erhaltbarkeit zu vermeiden, bevor das Problem beginnt.

Stylelint Stylelint hilft Ihnen, Fehler zu vermeiden und Konventionen in Stilen durchzusetzen. Es verfügt über über 160 Fehlerprüfregeln und ermöglicht es Ihnen, Ihre eigenen Regeln über Plugins zu erstellen.

Stiftungsinstallation und Konfiguration Stylelint installieren wie jedes andere NPM -Paket:

npm install -g stylelint Nach Abschluss der Installation müssen wir sie vor der Verwendung von Stylelint konfigurieren. Stylelint wird nicht mit einer Standardkonfigurationsdatei ausgestattet. Wir müssen eine Konfigurationsdatei erstellen. Erstellen Sie eine .stylelistrc -Datei im Projektverzeichnis. Diese Datei enthält unsere Konfigurationsregeln, die mit JSON (JavaScript -Objektnotation) oder YAML (YAML AIN'T Markup Language) verwendet werden können. Die Beispiele in diesem Abschnitt verwenden JSON.

Unsere .stylelistrc Datei muss ein Objekt mit rules Attribut enthalten. Der Wert von rules ist selbst ein Objekt, das eine Reihe von Stylelint -Regeln und deren Werte enthält:

{ "rules": {} } Wenn wir beispielsweise die !important Deklaration deaktivieren möchten, können wir declaration-no-important auf true :

festlegen { "rules": { "declaration-no-important": true } } Stylelint unterstützt mehr als 150 Regeln, die nach Syntaxfehlern, Einkerbung und Newline -Konsistenz, ungültigen Regeln und Selektorspezifität prüfen. Sie finden eine vollständige Liste der Regeln und deren verfügbaren Werte im Stylelint -Benutzerhandbuch.

Beginnen Sie mit der grundlegenden Stylelint -Konfiguration Sie können es einfacher finden, mit der grundlegenden Konfiguration zu beginnen und dann gemäß den Projektanforderungen anzupassen. stylelint-config-recommended Die grundlegende Konfiguration ist eine gute Startkonfiguration. Es ermöglicht alle "möglichen Fehler" -Regeln. Installieren Sie es mit NPM:

npm install -g stylelint-config-recommended Erstellen Sie dann in Ihrem Projektverzeichnis eine .stylelistrc Datei mit den folgenden Zeilen:

{ "extends": "/absolute/path/to/stylelint-config-recommended" } Ersetzen Sie /absolute/path/to/ durch das Verzeichnis, in dem Sie stylelint-config-recommended installiert haben. Globale NPM -Pakete finden Sie normalerweise im Verzeichnis von Windows 10 -Systemen und in UNIX/Linux- und MacOS -Systemen. Geben Sie %AppData%\npm\node_modules ein, um Ihr globales /usr/local/lib/node_modules Verzeichnis zu finden. npm list -g node_modules Wir können dann unsere Konfiguration verbessern, indem wir

Attribute hinzufügen. Um beispielsweise die Präfixe von Anbietern zu verbieten, sieht unsere Datei wie folgt aus: rules .stylelistrc

Was ist, wenn wir die maximale Spezifität des Selektors auf 0,2,0 begrenzen möchten? Dadurch können Selektoren wie { "extends": "/absolute/path/to/stylelint-config-recommended", "rules": { "value-no-vendor-prefix": true } } , jedoch nicht . Wir können dies tun, indem wir unsere Konfiguration .sidebar .title Regeln hinzufügen: #footer_nav selector-max-specificity

Stylelint { "extends": "/absolute/path/to/stylelint-config-recommended", "rules": { "value-no-vendor-prefix": true, "selector-max-specificity": "0,2,0" } } verwenden Stylelint zum Überprüfen von CSS -Dateien, den Befehl stylelint ausführen und den Pfad an die CSS -Datei als Parameter übergeben:

Alternativ können Sie alle CSS -Dateien in einem bestimmten Verzeichnis überprüfen oder sogar rekursiv überprüfen: stylelint stylesheet.css

Stylelint kann auch das in HTML -Dateien eingebettete CSS stylelint "./css/**/*.css" Element verwenden. Geben Sie einfach den Pfad als Parameter an die HTML -Datei weiter. style Wenn Stylelint eine Liste von Dateien angezeigt wird, die die Fehler enthalten, wie im Bild unten gezeigt.

UNCSS UNCSS analysiert Ihre HTML- und CSS -Dateien und löscht nicht verwendete CSS. Wenn Ihr Projekt ein CSS -Framework wie Bootstrap enthält oder ein Reset -Stylesheet verwendet, sollten Sie Ihrem Workflow UNCS hinzufügen. Es wird unnötige CSS und Bytes aus Ihrem Code entfernt.

UNCSS -Installation Wie bei anderen NPM -Paketen können Sie UNCSS mit dem folgenden Befehl installieren:

npm install -g stylelint Verwenden Sie UNCSS aus der Befehlszeile UNCSS erfordert den Dateipfad oder die URL der HTML -Seite, die die verknüpfte CSS -Datei enthält. Zum Beispiel:

{ "rules": {} } UNCSS analysiert HTML und seine verknüpften Stylesheets und drucken die optimierten CSS in die Standardausgabe. Verwenden Sie den Umleitungsoperator ( > ):

, um zu einer Datei umzuleiten: { "rules": { "declaration-no-important": true } }

Sie können auch mehrere Dateipfade oder URLs an die Befehlszeile übergeben. UNCSS analysiert jede Datei und löst die optimierten CSS mit Regeln, die eine oder mehrere Seiten betreffen: npm install -g stylelint-config-recommended

Siehe die UNCSS -Dokumentation für eine vollständige Liste von Befehlen und ein Beispiel für die Verwendung von UNCSS mithilfe von Node.js -Skripten. Erwägen Sie, einen Aufgabenläufer oder ein Build -Tool zu verwenden

Ausführen dieser Tools scheint eine Menge zusätzlicher Arbeit zu sein. Betrachten Sie dazu einen Aufgabenläufer oder erstellen Sie Ihrem Workflow ein Taskläufer. Zu den beliebten Aufgabenläufern gehören Grunzen, Gulp und Webpack. Alle drei Tools haben eine gut dokumentierte Dokumentation und eine riesige Entwicklergemeinschaft.

Der Vorteil dieser Aufgabenläufer und -buildungssysteme besteht darin, dass sie Verbindungen automatisieren und Aufgaben optimieren können. Sie sind auch nicht auf CSS beschränkt. Die meisten Build -Tools enthalten auch Plugins zum Optimieren von JavaScript und Bildern.

Da Konfigurations- und Build -Skriptdateien normalerweise JSON und JavaScript sind, können Sie sie problemlos zwischen Projekten wiederverwenden oder mit Ihrem Team teilen. Jedes in diesem Artikel erwähnte Tool kann über Plugins in Grunzen, Gulp oder Webpack integriert werden. Vor allem

Verfolgen Sie einen pragmatischen Ansatz, um Ihr Toolkit aufzubauen. Fügen Sie Tools hinzu, von denen Sie glauben, dass sie Ihren Workflow verbessern und die Ausgangsqualität verbessern können. (Um mehr über CSS -Debugging und Optimierung zu erfahren, lesen Sie bitte das Buch "CSS Master, zweite Ausgabe")

verwandte Artikel: CSS-Debugging und Optimierung: Browser-basierte Entwickler-Tools CSS -Debugging und Optimierung: Komprimierung mit CSSO FAQs (FAQs) über CSS -Debugging und Optimierung der Codequalität Tools Welche Vorteile haben die Verwendung von CSS -Debugging und Optimierung von Tools für die Codequalität?

CSS -Debugging und Optimierung von Codequalitätstools sind für jeden Webentwickler unerlässlich. Sie helfen dabei, Fehler im CSS -Code zu identifizieren und zu beheben und sicherzustellen, dass Ihre Website wie erwartet funktioniert. Diese Tools helfen auch dazu, den CSS -Code zu optimieren, was die Ladegeschwindigkeit der Website erheblich verbessern kann. Dies ist entscheidend, da langsame Websites zu einer schlechten Benutzererfahrung führen und sich negativ auf das Suchmaschinenranking der Website auswirken können. Darüber hinaus können diese Tools dazu beitragen, die Qualität des CSS -Codes aufrechtzuerhalten und das Lesen und Verwalten erleichtert. Wie funktioniert UNCS? UNCSS ist ein leistungsstarkes Tool, das Ihre HTML- und CSS -Dateien analysiert, um nicht verwendete Stile zu entfernen. Es funktioniert, indem es HTML -Dateien analysiert, die verwendeten CSS -Selektoren identifiziert und anschließend mit den Selektoren in der CSS -Datei verglichen wird. Alle Selektoren in der CSS -Datei, die in der HTML -Datei nicht verwendet werden, werden als nicht verwendet und werden gelöscht. Dies kann die Größe der CSS -Datei erheblich verringern und so das Laden der Website beschleunigen.

Wie kann man UNCSS online verwenden? UNCSS Online ist ein webbasiertes Tool, mit dem Sie UNCSS verwenden können, ohne es auf Ihrem Computer zu installieren. Um es zu verwenden, besuchen Sie einfach die Online -Website der UNCSS, fügen Sie Ihren HTML- und CSS -Code in das bereitgestellte Feld ein und klicken Sie auf die Schaltfläche "Unbenutzte CSS nicht verwendet". Das Tool analysiert dann Ihren Code und bietet Ihnen eine neue CSS -Datei, die nur die im HTML -Code verwendeten Stile enthält.

Video -Tutorial zur Verwendung von UNCSS? Ja, es gibt viele Video -Tutorials online, mit denen Sie die Verwendung von UNCSS verwenden können. Diese Tutorials bieten Schritt-für-Schritt-Anweisungen, die auch für Anfänger das Tool verstehen und verwenden können. Auf YouTube gibt es solche Tutorials.

Wie entfernt ich nicht verwendete CSS von meiner Website? Es gibt mehrere Tools und Methoden, um ungenutzte CSS von Ihrer Website zu entfernen. Eines der beliebtesten Tools ist UNCSS, das Ihre HTML- und CSS -Dateien analysiert, um nicht verwendete Stile zu entfernen. Weitere Tools sind PurifyCSS und CSSNano, die auch dazu beitragen, den CSS -Code zu optimieren. Darüber hinaus können Sie ungenutzte CSS manuell löschen, indem Sie Browser -Entwickler -Tools verwenden, um Ihre Website zu überprüfen und ungenutzte Stile zu identifizieren.

Gibt es noch andere CSS -Debugging- und Optimierungstools? Zusätzlich zu UNCSS stehen mehrere andere CSS -Debugging- und Optimierungstools zur Verfügung. Diese Tools umfassen CSS -Lint, mit dem Fehler im CSS -Code identifiziert und behoben werden können.

Wie kann ich die Qualität des CSS -Code sicherstellen? Sicherstellen, dass die Qualität des CSS -Code eine Vielzahl von Praktiken beinhaltet. Dazu gehört die Verwendung von CSS -Präprozessoren wie SASS oder weniger, um den Code zu organisieren und die Verwaltung von CSS zu erleichtern. Darüber hinaus kann die Befolgung von Best Practices wie der Verwendung sinnvoller Klassen- und ID -Namen, Annotationscode und der Einhaltung eines konsistenten Codierungsstils auch dazu beitragen, die Qualität des CSS -Codes aufrechtzuerhalten.

Wie verbessern CSS -Debugging- und Optimierungstools die SEO meiner Website? CSS -Debugging- und Optimierungstools können die SEO Ihrer Website erheblich verbessern, indem die Ladegeschwindigkeit Ihrer Website erhöht wird. Suchmaschinen wie Google View -Seite Laden Sie die Geschwindigkeit als Ranking -Faktor, sodass Websites, die schneller laden, in den Suchergebnissen höher rangieren. Darüber hinaus können diese Tools dazu beitragen, eine bessere Benutzererfahrung zu schaffen, die sich auch positiv auf die SEO der Website auswirkt.

Wenn ich ein Anfänger bin, kann ich dann CSS -Debugging- und Optimierungstools verwenden? Ja, die meisten CSS-Debugging- und Optimierungstools sind so konzipiert, dass sie benutzerfreundlich sind und für Anfänger und erfahrene Entwickler zur Verfügung stehen. Viele dieser Tools bieten detaillierte Dokumentation und Tutorials, um Ihnen den Einstieg zu erleichtern. Es ist jedoch am besten, ein gewisses Verständnis von CSS zu haben, bevor diese Tools verwendet werden.

Was sind die Nachteile der Verwendung von CSS -Debugging- und Optimierungstools? Während CSS -Debugging- und Optimierungstools viele Vorteile bieten, haben sie auch einige potenzielle Nachteile. Beispielsweise können einige Werkzeuge Stile entfernen, die derzeit nicht verwendet werden, aber in Zukunft möglicherweise erforderlich sein. Darüber hinaus können diese Tools manchmal falsch positive Ergebnisse erzeugen und Stile als unbenutzt identifizieren, wenn sie tatsächlich benötigt werden. Überprüfen Sie daher diese Änderungen, bevor Sie sie auf Ihre Website anwenden.

CSS-Debugging und Optimierung: Code-Qualität-Tools

In Verbindung stehende Artikel