Share
Die Überprüfung unseres Codes durch einen Profi ist eine großartige Möglichkeit, die Codequalität zu verbessern, aber was passiert, wenn Sie keinen Rockstar-Programmierer haben? Du machst das Beste und holst dir einen 'Fussel' für diese Sprache.
Heute möchte ich ein wenig über CSSLint sprechen, ein kürzlich veröffentlichtes Programm zur Codeanalyse für CSS. Komm mit mir nach dem Sprung!
Lassen Sie uns eine Definition für Wikipedia finden:
Lint ist ein Tool, das die verdächtige Verwendung von Software in einer beliebigen Computersprache kennzeichnet.
Grundsätzlich betrachtet ein Flusen unseren Code und prüft, ob Programmierfehler vorliegen. Undefinierte Variablen, ineffiziente Konstrukte, solche Dinge.
Sie fragen sich wahrscheinlich, warum Sie jemals ein solches Werkzeug benötigen. Seien wir ehrlich: Nicht alle von uns verfügen über ein Höchstmaß an Wissen, womit wir arbeiten, oder haben den Luxus, einen Code-Peer-Review zu erhalten. In diesen Fällen ist es die nächstbeste Option, unseren Code in ein Flusen zu kleben. Im Gegensatz zu Clean-Up-Tools spuckt Flusen den Code aus und wie er verbessert werden kann.
CSSLint wurde von Nicholas Zakas und Nicole Sullivan entwickelt und ist ein Open-Source-Tool, das Ihre Syntax anhand einer Reihe von vordefinierten Regeln überprüft, um mögliche Ineffizienzen auszurotten und sicherzustellen, dass Ihre Präsentation erwartungsgemäß funktioniert, mit kleinen Überraschungen.
Nachdem Sie zur CSSLint-Site übergegangen sind, können Sie lediglich Ihr Quell-CSS einfügen und auswählen, welche Regeln Sie durchsetzen möchten. Klicken Sie auf den Fussel-Button und CSSLint beginnt, Ihre Selbstgefälligkeit zu erodieren.
Wenn Sie ein Node-Junkie wie ich sind, gibt es dafür auch eine Version. Tippen Sie einfach ein sudo npm install -g csslint und du bist gut zu gehen!
Werfen wir einen kurzen Blick auf die Regeln, die CSSLint erzwingt.
Wenn Sie etwas wie ich sind, müssen Sie bei einigen Regeln übergangen worden sein.
Ehrlich gesagt, ja, nein und alles dazwischen.
Nachdem ich bei einer Reihe von Diskussionsforen und IRC-Räumen gelauert hatte, fand ich heraus, dass viele Entwickler über die Regeln in Aufruhr zu sein scheinen und vielleicht recht. Lassen Sie mich versuchen zu erklären, warum die meisten Regeln sinnvoll sind, andere jedoch nicht.
IDs sollten nicht in Selektoren verwendet werden, da diese Regeln zu eng mit dem HTML-Code verknüpft sind und keine Wiederverwendung möglich ist. Es wird empfohlen, Klassen in Selektoren zu verwenden und dann einem Element auf der Seite eine Klasse zuzuweisen.
Dieser hat bei vielen Entwicklern einen Nerv getroffen, da wir es gewohnt sind, IDs für die Hauptstrukturkomponenten eines Layouts wie Kopf- und Fußzeile zu vergeben.
CSSLint argumentiert, dass der Stil solcher Elemente per Definition nicht direkt wiederverwendet werden kann. Wenn Sie zwei Seitenleisten auf Ihrer Seite haben möchten, können Sie das Styling in einer Klasse wiederverwenden, die ID jedoch nicht.
Denken Sie daran, dass eine Klasse nur dann wiederverwendet werden kann, wenn sie nicht wiederverwendet werden kann. Einzigartige Klassen sind absolut akzeptabel und bieten die Möglichkeit, das Styling bei Bedarf wiederzuverwenden.
Überschriftenelemente (h1-h6) sollten als Stile der obersten Ebene definiert werden und nicht auf bestimmte Bereiche der Seite ausgerichtet sein.
Die meisten Entwickler, einschließlich mir, haben sich daran gewöhnt, kontextsensitive Header zu schreiben. Wie in definieren wir ein separates Styling für Kopfzeilen, abhängig davon, auf welcher Seite es angezeigt wird. Ein Argument für diesen Ansatz ist, dass alles aus dem Markup in das Stylesheet verschoben wird. Sie können lediglich ein Tag definieren und die CSS entsprechend kaskadieren lassen.
CSSLint argumentiert, dass ein solcher Ansatz die Vorhersagbarkeit Ihres Designs beeinträchtigt. Wenn jemand anderes Ihr Design aufgreifen und versuchen würde, irgendwo eine Überschrift einzufügen, muss er / sie sich des Kontexts und der Platzierung des Elements bewusst sein. Bei bedingungslos definierten Überschriften kann er eine Überschrift unabhängig von den übergeordneten Elementen überall verwenden, wo er sich seiner Präsentation bewusst ist.
Überschriftenelemente (h1-h6) sollten genau eine Regel auf einer Site enthalten.
Eine Erweiterung der obigen Regel zur Verbesserung der Vorhersagbarkeit der Präsentation. Richtig oder falsch, denken Sie daran, dass dies grundsätzlich das Einschließen einer Art Reset-Code in Ihr Stylesheet ausschließt. Jedes Rücksetzblatt wirkt sich auch auf Ihre Überschriften aus. CSSLint wird es daher als Fehler kennzeichnen.
Angrenzende Klassen sehen wie .foo.bar aus. Technisch in CSS zulässig, werden diese von Internet Explorer 6 und früheren Versionen nicht ordnungsgemäß behandelt.
Wenn diese Regel aktiviert ist, kennzeichnet CSSLint Regeln wie .nav.red, mit dem offiziellen Grund ist, dass Internet Explorer 6 und darunter nicht gut mit dem Wahlschalter zusammenspielen. Ich respektiere die Entwickler, aber ich muss hier nicht zustimmen. Nur weil es nicht funktioniert Internet 'Dev-Buster' Explorer 6 ist kein guter Grund, mit einer nützlichen Funktion aufzuhören.
Umrandungen und Füllungen fügen Platz außerhalb des Elementinhalts hinzu. Das Festlegen von Breite oder Höhe zusammen mit Rändern und Polsterung ist in der Regel ein Fehler, da Sie nicht das gewünschte visuelle Ergebnis erhalten. CSS-Fusseln warnt, wenn eine Regel zusätzlich zum Abstand und / oder zum Rand Breite oder Höhe verwendet.
Das Box-Modell ist vielleicht kaputt, aber fast jeder Frontend-Entwickler, den ich kenne, ist sich der Unzulänglichkeiten und der Überwindung der Ungleichheiten bei der Implementierung sehr bewusst. Sind wir wirklich bereit, eine Kontrolle aufzugeben, da einige ältere Browser eine andere Implementierung haben?
Die Verwendung von Web-Schriftarten hat Auswirkungen auf die Leistung, da Schriftdateien sehr umfangreich sein können und einige Browser das Rendern blockieren, während sie heruntergeladen werden. Aus diesem Grund werden Sie von CSS Lint gewarnt, wenn ein Stylesheet mehr als fünf Webschriftarten enthält.
Ich sehe keine Situation voraus, in der ich mehr als fünf Schriftarten auf einer Seite verwenden würde, aber das Eintauchen in dieses Gebiet ist meiner Meinung nach etwas fragwürdig. Wenn überhaupt, ist dies ein Konstruktionsfehler als ein Entwicklungsfehler. Wenn ein Entwickler in seinem Stylesheet auf fünf verschiedene Schriftarten verweist, besteht die Chance, dass dies nicht zufällig geschieht.
CSS Lint überprüft einfach, ob Sie Float mehr als zehn Mal verwendet haben, und zeigt in diesem Fall eine Warnung an. Die Verwendung dieser vielen Floats bedeutet normalerweise, dass Sie eine Art Abstraktion benötigen, um das Layout zu erreichen.
Ich stimme mit dem Argument der Schöpfer überein, dass das Vorhandensein von mehr als zehn Float-Instanzen eine schlechte Idee ist, aber ich glaube auch, dass dies die Markierung über eine bestimmte Größe hinaus beeinflusst.
In einer Situation, in der Sie zwei Elemente verschieben möchten, verwenden Sie normalerweise:
? und das Styling nach traditionellen Methoden.
.Behälter-1 Breite: 70%; Schwimmer: links; .container-2 Breite: 30%; Schwimmer: links;
Die CSSLint-Methode würde den Float wie folgt abstrahieren:
? und styling wie so:
.Behälter-1 Breite: 70%; .container-2 Breite: 30%; .float float: left;
Ich stimme zwar zu, dass dies ein gangbarer Ansatz ist, aber ich bin der Meinung, dass das Markup stark überfüllt sein wird, wenn Sie versuchen, mehr davon zu abstrahieren. Ich würde eher eine Klasse sehen, die den größten Teil ihres Stylings an einer Stelle enthält, als das Markup mit 10+ Klassen zu überladen. Ich habe das Gefühl, dass dies ein subjektives Thema ist.
Alle oben genannten Regeln entsprechen den aktuellen Standardpraktiken. Sicher, einige der Regeln haben wenig Bedeutung in der realen Welt, wie Nullwerte, die keine Einheiten benötigen, oder werden von einer anständigen IDE wie Parsing-Fehlern abgefangen. Dennoch sind dies gute Regeln für eine CSS-Testsuite.
CSSLint wird vielen Entwicklern jedoch weiterhelfen?
CSSLint wurde ohne Zweifel von Entwicklern mit hervorragenden Referenzen geschrieben und wird definitiv vielen Entwicklern und Designern helfen.
Was ich ein wenig ärgerlich finde, ist, dass viele der umstrittenen Regeln von Object Oriented CSS stammen, einem CSS-Framework, mit dem Entwickler wartungsfähige CSS schreiben können. Obwohl ich nichts gegen den Rahmen und sein Paradigma habe, müssten Sie zustimmen, dass dies ein Weg ist, Dinge zu tun, nicht das Weg, Dinge zu tun.
Im Gegensatz zu JSLint, bei dem ich der Meinung bin, dass alle Regeln sinnvoll sind, hat CSSLint das Gefühl, dass mir gesagt wird, dass ein CSS-Stil richtig ist und die anderen falsch sind. Es wäre so, als würde mich jemand bitten, die Beatles aufzugeben, weil Rolling Stones ihre bevorzugte Band ist.
Werkzeuge sind genau das - Werkzeuge.
Natürlich neigen wir als Gruppe dazu, in Bezug auf unseren Code ziemlich anhänglich zu sein. Es macht uns nicht Spaß zu hören, dass unser Code potentielle Probleme haben oder auf eine ganz andere Art und Weise geschrieben werden könnte.
Die Hauptsache ist, dass CSSLint letztendlich ein Werkzeug ist. Es lässt Sie nur wissen, dass einige der Bereiche kann haben fehler.
CSSLint muss nicht die eiserne Faust sein, auf der Sie Ihr gesamtes Ego aufbauen. Es gibt keinen Grund, sich nach hinten zu beugen, um eine Warnung zu vermeiden, wenn Sie genau wissen, was Sie tun.
Ja.
In CSS gibt es wie in der Integralrechnung viele Lösungen für ein gegebenes Problem. Es gibt nicht unbedingt einen "besten" Weg, Dinge zu tun - Sie können die Lesbarkeit verbessern, während ich die Effizienz unterstütze. Wichtig ist, dass Sie erkennen, dass jeder und jeder von uns seine einzigartige Art hat, Dinge zu tun.
Wenn Sie bei der Lösung eines Problems nicht die gleichen Perspektiven haben, widersprechen Sie möglicherweise einem anderen Ansatz und finden es sogar fragwürdig.
Trotzdem gibt es keinen guten Grund, keine neuen Dinge zu lernen. Wenn Sie Probleme aus der Perspektive eines anderen Entwicklers betrachten, können Sie feststellen, ob Sie etwas Neues lernen können.
Was denkst du über CSSLint? Findet es nützlich? Verwirrend? Hat es bei Ihren realen Problemen geholfen? Lass es uns in den Kommentaren wissen.
Seien Sie sich gegenseitig ausgezeichnet und vielen Dank für das Lesen!
Accentsconagua