Wenn Sie viel CSS -Code schreiben, können Sie mehr als einen Fehler erleben. Möglicherweise wird ein Tool benötigt, um zu verhindern, dass Ihr CSS -Schreibfehler eingeschrieben wird.
Vielleicht ist Ihr Fehler manchmal wirklich ein Fehler. Es ist auch möglich, dass Inkonsistenzen oder unklare Codestile einfach durch hastig verursacht werden. Vielleicht scheinen viele von ihnen trivial (abhängig von Ihrer Persönlichkeit), aber wenn die Codebasis wächst und sich die Zeit ansammelt, werden viele Menschen bei der Verwendung hässlicher Dinge machen. Die Konsequenzen von Dingen können Sie sich nicht vorstellen.
Sie versuchen, sich selbst zu kontrollieren. Ihre Kollegen helfen Ihnen auch, wenn Sie frei sind, Ihre Fehler rechtzeitig zu korrigieren. Sie und Ihre Kollegen sind jedoch beide Fehler von Fehlern, so dass sie am Ende zumindest bis zu einem gewissen Grad unweigerlich Misserfolge sind. Später lösen Sie oder andere das Problem, das durch CSS -Fehler auf Ihrer Seite verursacht wird.
Weder Sie noch Ihre Kollegen diskutieren gerne die Fehler, die Sie gemacht haben, weil es peinlich ist. Es kann sogar manchmal frustrierend oder emotional gebrochen sein. Eine bestimmte Spezifikation ist manchmal hilfreich für die Wartung der Codebasis, wie z. B. einen konsistenten Schreibstil, der bei manuellem Ausführen etwas pedantisch und langweilig erscheint. Andernfalls zeigen sie die Elemente Ihrer üblichen Liebe, um sich zu zeigen und Sturheit zu zeigen.
Darüber hinaus bevorzugen Sie möglicherweise die korrekten Behebung von Fehlern rechtzeitig, anstatt darauf zu warten, dass der Code überprüft wird und andere auf die Fehler hinweisen und sie selbst ändern und erklären, dass Sie solche Fehler nicht erneut haben. Wenn Ihr CSS -Fehler auftritt, hilft Ihnen ein zeitnahes Feedback, viel Zeit zu sparen.
Was Sie brauchen, ist eine Maschine, die Fehler verhindert
Sie benötigen eine Maschine, die Fehler verhindert, CSS verstehen und Sie verstehen kann: Ihre Absichten, Vorlieben, Ideen und Schwächen.
Solche Maschinen haben Einschränkungen. Alles ist nicht perfekt. Aber diese Einschränkung unterscheidet sich von Ihnen und Ihren Kollegen. Solange es Fehler verhindern kann, wird es sie weiterhin verhindern und unermüdlich arbeiten. Gleichzeitig können Sie und Ihre Kollegen die Maschine immer verbessern, ihre Funktionalität erweitern und ihre Grenzen schwächen. Es ist Open Source, und Menschen auf der ganzen Welt können sich anschließen und ihren Beitrag leisten-andere Autoren, die sich davon abhalten möchten, CSS-Schreibfehler zu haben.
Wie andere brauchen CSS -Autoren Linter
Wir nennen diese Programme, die Fehler "Linter" verhindern. Es gibt mehrere bessere Linter in JavaScript. Insbesondere eslint, es funktioniert auf wundersame Weise und zeigt uns, dass ein guter Verluste so nützlich ist. Aber in CSS haben wir nicht so viel Glück, dass unsere Auswahl sehr begrenzt ist: SCSS-Lint auf Rubybasis mit speziellen Präprozessoren und früheren CSS-Lint.
Aber das war alles, bevor Postcss erschien. Darüber hinaus bietet PostCSS einige Methoden, um mehr interaktive CSS -Tools zu erstellen. Es kann jede CSS -Klassensyntax für Analyse und Betrieb in ein Abstract Syntax Tree (AST) -Plugin analysieren. Und mit einem benutzerdefinierten Parser können Postcss sogar unregelmäßige ungültige Muster verarbeiten (z. B. // Kommentare)
Reifebedingungen können bereits einen Linter mit leistungsstärkeren Funktionen erzeugen-angetrieben von Postcss und inspiriert von den besten Funktionen von SCSS-Lint und Eslint.
Ich habe mit ein paar Freunden an diesem Projekt gearbeitet und jetzt werde ich mit der Einführung der Tools, die wir entwickelt haben, vorstellen: Stylelint.
Dinge, die Sie mit Stylelint machen können
Das Folgende ist eine Zusammenfassung der Funktionen, die in Stylelint mit mehr als 100 Regeln und Skalierbarkeit ausprobiert wurden.
Wenn Sie an diesem Punkt ein wenig ungeduldig werden ("OK, OK: Ich glaube, Stylelint wird wundersame Arbeitseffekte haben. Keine zu viel Zusammenfassung."). Gehen Sie einfach zum nächsten Abschnitt, hier erkläre ich nur einige Probleme und gebe einige Tipps.
Fehleraufnahme
Einige Stylelint -Regeln sollen offensichtliche Fehler identifizieren, z. B. Rechtschreibfehler oder Auslassungen, die durch Ihre verärgerten oder trostlosen Augen geschaffen wurden. Beispielsweise können Sie leere Blöcke, ungültige Hexadezimalwerte, doppelte Selektoren, nicht genannte Animationsnamen und falsche lineare Gradientensyntax deaktivieren.
Die anderen Regeln sind, Ihr Bestes zu geben, um subtilere Fehler zu fangen. Hier ist eine Regel: Wenn Sie Kurzeigenschaften (z. B. margin ) verwenden, die ihre Immobilienkollegen (wie margin-top ) überschreiben können, wird eine Warnung ausgegeben, da dies durch Ihre Nachlässigkeit verursacht werden kann. Darüber hinaus gibt es eine andere Regel, die Sie warnt: Wenn ein Chaos auftritt, wenn Regel A vor Regel B erscheint, aber Regel B abdeckt, weil der Selektor von Regel A eine höhere Priorität hat (z. B. Regel A ist .foo.bar{・・・} und Regel B ist .foo{・・・} ). Dies ist eine sehr schwierige Situation.
Es gibt auch eine Regel, die das Postcss Doiuse -Plugin verwendet, um zu überprüfen, ob Ihr Browser diesen Stil unterstützt. Ein anderer verwendet das CSS-ColorGuard-Plugin, um die Farbähnlichkeit zu veranlassen, um zu vermeiden, dass Sie Ihre Verwendung verwechseln. (Bitte beachten Sie: Dies ist einer der Hauptvorteile von Stylelint, die auf Postcss basieren: Im Vergleich zu anderen Postcss-Plug-Ins kann Stylelint mit wenig Aufwand fordern.)
Best Practices durchsetzen
Wenn Sie Systemmethoden in Ihren Stylesheets verwenden oder einen Stilhandbuch für Ihren Code haben, sollten Sie diese Muster verbieten. Stylelint bietet diese Funktionen bereits.
Zunächst müssen Sie Ihren Selektor hart steuern. Mit Stylelint können Sie Selektoren deaktivieren, die eine bestimmte Spezifität überschreiten oder Grenzen für die Nisttiefe festlegen. Sie können Kategoriewählern (z. B. Selektoren ohne IDs) deaktivieren und regelmäßige Ausdrücke für die Benennung von Konventionen für den Rest verwenden.
Sie können die Verwendung von !important oder Browser -Hacks verbieten, die Ihr Browser nicht unterstützt. Wenn Sie Autoprefixer verwenden (oder Sie sollten), können Sie die Verwendung von Anbieterpräfixen im Quellstylesheet deaktivieren.
Wenn Sie strenger sein möchten - Sie können einige Zeit mit der Konfiguration verbringen, um eine absolute Konsistenz zu gewährleisten -, können Sie die Reihenfolge der Stylesheet -Eigenschaften durchsetzen und Eigenschaften, Werte, Funktionen und Einheiten für Blacklisten und Whitelists bereitstellen.
Führen Sie Konventionen im Code -Stil aus
Stylelint verfügt über Konventionen, um automatisch Code -Stile auszuführen, sodass Sie und Ihre Teamkollegen sie nicht aktiv einrichten müssen. Wir sind bestrebt, diese Regeln umfassender und flexibler zu gestalten.
Diese Regeln richten sich hauptsächlich auf Räume, aber auch für andere Details, z. B. Anführungszeichen, obere und untere Fallbuchstaben, Schreiben von Nullen vor Dezimalstellen, Verwendung von Schlüsselwörtern, Schreibwerte usw.
Wenn Sie träumten, dass Sie und Ihre Teamkollegen eine Formatkonvention festlegen können (zum Beispiel lassen wir nach dem Deklarieren eines Dickdarms immer einen Platz) und diese in Ihrer Stylelint -Konfiguration ändern, und Sie werden ihn danach nicht erneut diskutieren. Lassen Sie es im Maschinenreich ausgeführt werden.
Alles entwickeln und erweitern alles
Nicholas Zakas, der Schöpfer von Eslint (und CSS Lint), schrieb über den Erfolg von Eslint, liegt in seiner Skalierbarkeit. Stylelint versucht, Eslints Lead zu folgen, und bietet CSS -Autoren einen Linter, der ebenfalls erweiterbar ist.
Sie können Ihr eigenes Regeln -Plugin schreiben und veröffentlichen. Jetzt haben wir eine Menge Dinge zu verwenden; Und wir sind bestrebt, die hervorragenden Plugins anderer Leute zu sehen.
Die Konfiguration ist erweiterbar und kann daher gemeinsam genutzt werden. Was Plugins betrifft, haben wir den Wert dieser Funktion von Eslint gelernt. Überprüfen Sie, ob WordPress- und Koffers Konfigurationen enthält und veröffentlicht wurden.
Wenn Sie die eingebauten Tipps von Stylelint nicht mögen, können Sie Ihren eigenen Stil von Hand erstellen oder sogar für Ihre Organisation erstellen. Sie können auch die Regeln anpassen, die zur Bereitstellung von Warnmeldungen verwendet werden.
Mit der Stylelint -API können Sie Plugins für Text Compiler erstellen und Tests durchführen, um Stylelint in alle Aspekte Ihres Workflows einzubeziehen.
Wenn Sie Ideen zu Stylelint -Erweiterungen haben, lassen Sie es uns bitte wissen!
Antworten auf erwartete Fragen
Es kann einige Fragen in Ihrem Kopf geben. Hier sind einige der häufigsten Erklärungen:
Ist es möglich, Stylelint in SCSS oder weniger zu verwenden?
Die Antwort lautet Ja, Sie können Stylelint in SCSS verwenden und es wird auch in weniger unterstützt! Da PostCSS benutzerdefinierte Parsers ermöglicht, kann Stylelint problemlos eine Vielzahl von nicht standardmäßigen Syntaxen unterstützen. Sie können einen Postcss -Parser zum Parsen anpassen.
Aufgrund von Postcss Parser-StyLelint unterstützt SCSS, weniger und die neuen Zucker. Wenn Sie einen anderen benutzerdefinierten Syntax -Support implementieren möchten, können Sie dies mit Postless tun!
Natürlich gibt es bestimmte Regeln, die an Ihre nicht standardmäßige Syntax gebunden sind (z. B. #{$interpolation} im SASS-ID-Selektor). Da Stylelint versucht, den Stil unserer Stylesheets zu vertuschen - manche Menschen verwenden Standard -CSS, einige Leute verwenden erweiterte Sprachen wie SCSS, einige Leute verwenden seltsame benutzerdefinierte Eigenschaften usw. - diese werden unweigerlich einige Schwachstellen schaffen, die gefüllt werden müssen. Wir haben uns jedoch mit diesen Fehlern befasst, die wir gefunden haben. Alle Regeln in diesem Zeitraum können in einem Zeilen-für-Reihen-Stylesheet oder in einem Zeilen-für-Reihen-Stil vollständig geschlossen oder deaktiviert werden.
Kann Stylelint in der Lage sein, zukünftige CSS -Syntax zu verwenden?
Ja! Ähnlich wie oben erwähnte Antwort: Stylelint kann verstehen, was PostCSS versteht, einschließlich der Aktivierung einer zukünftigen CSS -Syntax (wahrscheinlich über PostCSS -Plugin). In der Tat befassen sich einige Stylelint -Regeln speziell mit der zukünftigen CSS -Syntax und einigen benutzerdefinierten Eigenschaften.
Die Stiftungskonfiguration ist riesig. Wo soll ich anfangen?
Wir empfehlen drei Konfigurationsmethoden:
Erweitern Sie eine veröffentlichte Konfiguration. Wir halten Stylelint-Konfigurationsstandards bei, um dem Benutzer einen inhärenten Benchmark zu ermöglichen. Und viele Konfigurationen wurden angekündigt. Beginnen Sie von vorne und fügen Sie jeweils eine Regel hinzu. Standardmäßig wird keine Regel eingeschaltet. Wenn Sie also die Regeln manuell hinzufügen, wissen Sie, welche durchgesetzt werden und jede Regel, die Sie hinzufügen, verstehen können. Starten Sie die Konfiguration des Kopierpastes, entscheiden Sie, welche Optionen verwendet werden sollen, und löschen Sie sie selektiv.
Zum Glück müssen Sie keine riesige Stylelint -Konfiguration immer wieder schreiben. Sie können einen Stil auswählen, den Sie mögen, und Sie können ihn überall verwenden.
Der einfachste Weg, Stylelint auszuführen?
Für die meisten Menschen ist der einfachste Weg durch seine Kommandozeile.
Wenn Sie ein Gulp-Plugin bevorzugen, können Sie Gulp-StyLelint-Stylelint-Spielen verwenden. Für WebPack gibt es viele Möglichkeiten für die Wahl. Wir hoffen, dass diese Plugins Sie dazu inspirieren, andere Stylelint -Plugins zu erstellen, z. B. für Grunzen. (Sie können in Open -Source -Projekten suchen!)
Sie können auch Stylelint über das Postcs -Plugin ausführen, einschließlich des gesamten Plugins. Dies bedeutet, dass Sie Stylelint überall verwenden können, wo Sie Postcss verwenden können (die fast jedes Kompilierungstool abdeckt)!
Darüber hinaus gibt es auch ein Stylelint -Textkompilierungs -Plugin für Atom, Sublime Text, VS -Code, um das schnellste Feedback bereitzustellen. Weitere Informationen finden Sie in der Liste der komplementären Tools auf der Stylelint -Website.
Wie unten gezeigt, in der Befehlszeile erwarten die Ergebnisse, die Sie erwarten:
Zeigen wie folgt im atom;
Kann Stylelint meinen Fehler beheben?
Nein, aber ein anderer namens Stylefmt ist dafür ausgelegt. Es erfordert eine Stylelint -Konfiguration - sehr ähnlich wie bei der Linie - und kann alle Fehler beheben. Wir hoffen, dass Stylelint, wie das Community -Personal beiträgt, sich zu automatischen Patchfehlern entwickeln kann, die Stylelint -Regeln verletzen. Bitte helfen Sie ihnen, dieses Ziel zu erreichen!
Sie können auch andere Tools wie CSSComb oder PerfectList verwenden, die in Verbindung mit Stylelint verwendet werden, um die Ruhe automatisch zu beheben und automatisch zu erzwingen.
Verwenden Sie die Lining für die Einschränkung der Supplementierung
Es gibt große Mengen an Einschränkungen in gutem CSS. Aus diesem Grund verbringen wir viel Zeit damit, Methoden wie SMACS, ACSS, BEM, KITCSS, ITCSS usw. zu diskutieren. Wir alle wissen, dass das Schreiben schlechter CSS sehr einfach ist. Wenn wir also keine Angst mehr vor dem Schreiben von CSS-Stil haben, müssen wir eine intelligente Strategie bei der Arbeit festlegen und uns tapfer daran halten.
Das Ziel von Stylelint ist es, die Ausführung zu automatisieren - eine Reihe von Kernregeln und ein steckbares Framework bereitzustellen, mit dem CSS -Autoren ihre eigenen Strategien ausführen können.
Lassen Sie uns versuchen, uns mitzuteilen, wie Sie Ihnen dienen können. Wenn Sie eine bessere Verbesserungsideen wie Beitragsregeln, Verbesserungen, Tests, Beheben von Fehler, Dateien, neuen Ideen oder einfach nur Feedback erzielen, geben Sie uns bitte eine Nachricht! Auf diese Weise haben alle unsere Entwickler auf allen Ebenen Arbeit zu tun.