Wiederholen Sie sich nicht (TROCKEN). Es ist ein einfaches Konzept mit der Möglichkeit, die Art und Weise, wie Sie Code schreiben, vollständig zu ändern. Wenn ich auf meine Anfänge mit CSS zurückblicke, glaube ich nicht, dass mir das Konzept sehr viel bedeutet. Sicher, in Ordnung, wiederholen Sie mich nicht, danke für den Rat. Wie lässt sich dies jedoch auf die anwendbaren Ratschläge übertragen?
Heute werden wir uns mit den Kernkonzepten beschäftigen, wie Sie das CSS, das Sie schreiben, überdenken, indem Sie das Fett reduzieren und die Redundanz reduzieren. Das Ergebnis wird schlankeres CSS sein, das einfacher zu erstellen und zu verwalten ist.
Wo ich denke, du bist
Dieser Artikel ist nicht für den Kerl, der seine Tage in Web-Entwicklungs-Blogs verbracht hat, um Kommentare zu hinterlassen und zu zeigen, wie viel mehr er weiß, als alle anderen. Wenn Sie bereits ein CSS-Genie sind, schreiben Sie ein Buch.
Stattdessen schreibe ich dies für die Masse von Entwicklern, die sich endlich mit dieser CSS-Sache beschäftigen. Sie haben Websites für ein Jahr gestaltet, vielleicht zwei, und Sie sind bereit, einen Schritt weiter zu gehen als nur effektiven Code zu schreiben und zu lernen, wie effizienter Code geschrieben wird.
? Sie sind bereit, einen Schritt weiter zu gehen, als effektiver Code zu schreiben und zu lernen, wie effizienter Code geschrieben wird.?Genau wie ich zu diesem Zeitpunkt in meiner Karriere, haben Sie den Jargon schon oft gehört, haben aber noch nicht die Erfahrung gemacht? wo plötzlich effizientes CSS schreiben sinnvoll ist. Hoffentlich finden wir diesen Klick heute.
Sass @extend
Nicht ausflippen. Wir werden über einen Präprozessor sprechen. Machen Sie sich keine Sorgen, ich werde nicht verlangen, dass Sie eines verwenden oder das gesamte Stück in ein Sass-Tutorial und nicht in ein CSS-Tutorial verwandeln. Wir werden lernen, wie man altes CSS effizienter schreibt.
?Nicht ausflippen. Wir werden über einen Präprozessor sprechen.Davon abgesehen verwendet Sass trotz seiner Komplexität die Vererbung von Selektoren auf eine viel einfachere Art und Weise, um Ihren Verstand als CSS einzubinden. Es ist ein sehr unkomplizierter und linearer Prozess, der das Konzept, sich nicht zu wiederholen, unglaublich leicht fassbar macht. Lass uns einen Blick darauf werfen.
Drei Boxen
Stellen Sie sich vor, Sie hätten drei sehr ähnliche, aber immer noch unterschiedliche Klassen. Hier ist ein Beispiel mit den Klassen? Box? ?Große Schachtel,? und? smallbox? (hoffentlich sind Ihre Klassennamen etwas genauer).
Wie Sie sehen können, benötigen alle drei Boxen die gleichen Grundstile. Die Größe ist jedoch unterschiedlich, so dass wir drei separate Klassen benötigen. All diese Redundanz ist jedoch nicht gut.
Wie können wir das trocknen? An dieser Stelle kommt die Sass @extend-Funktion zum Einsatz.
Sehen Sie, was hier passiert ist. Selbst wenn Sie nichts von Sass wissen, ist dieser Code ziemlich einfach zu verstehen. Anstatt die gleichen Eigenschaften immer wieder mit denselben Werten zu schreiben, können Sie @extend verwenden, um zu sagen: "Hey, nehmen Sie einfach den Code aus der Box-Klasse." Wir machen dann weiter und definieren nur die Eigenschaften, die geändert werden müssen.
Der resultierende Code ist kürzer und übersichtlicher, ohne die Lesbarkeit zu beeinträchtigen. Leider ist dies Sass, und die Funktion @extend ist in normalem CSS nicht vorhanden.
Lernen von der Sass-Ausgabe
Was war also der Sinn der großen Sass-Lektion, wenn wir @extend nicht in CSS verwenden können? Zu beachten ist, dass das ultimative Produkt von Sass, LESS und einem anderen Präprozessor Jane CSS ist. Wenn Sass in der Tat irgendeine Zauberei in der tatsächlichen Ausgabe bewirkt, sollten wir sie erkennen können.
Mal sehen, wie es gemacht wurde, diese @extends in CSS zu verwandeln:
Aha! Dieser Code ist viel prägnanter als unser ursprüngliches Konzept und dennoch ist er reines CSS. Die @ textend-Funktion ist eigentlich intelligent genug, um mit Hilfe von gruppierten Selektoren, die durch Kommas getrennt sind, schlanke CSS auszugeben.
Über @extend haben wir Sass auf die Entlassungen in unserem Code hingewiesen und sie alle in einer einzigen Regel zusammengefasst. Danach definierten wir die anderen Klassen nur mit dem Code, der unterschieden werden musste.
Überspringen von Sass
Die große Lektion, die Sie hier lernen müssen, ist, dass Sie keinen Vorprozessor benötigen, um all diese Arbeit für Sie zu erledigen. Sie können Sass komplett überspringen und einfach einen sauberen, prägnanten Code schreiben (obwohl ich persönlich immer noch denke, dass Sass die Bienenknie ist). Es ist vielleicht nicht so intuitiv, aber wenn man die Redundanz erkannt hat, ist es eine ziemlich einfache Aufgabe.
Die wichtige Lektion für mich war, dass ich nicht unbedingt erkenne, dass ich sloppy codiere, während ich mit verschiedenen Ideen in meinem Code experimentiere. Das ist in Ordnung! Eine solche Codierung von Anfang an ist etwas, das mit Erfahrung einhergeht. In der Zwischenzeit sollten Sie nur ein einfaches Prinzip in den Kopf bekommen: Sie sind noch nicht fertig, weil alles funktioniert!
? Ein einfaches Prinzip in den Kopf bekommen: Sie sind noch nicht fertig, weil alles funktioniert!?Sie könnten stundenlang mit einem Design oder einem funky Layout herumtüfteln, und wenn alles endlich passt, seufzen Sie erleichtert und bewegen sich mit dem Leben fort. Aber du bist noch nicht fertig! Als nächsten Schritt sollten Sie den gesamten Code, den Sie frustriert geschrieben haben, untersuchen und herausfinden, wie Sie ihn vereinfachen können.
Ein echtes Beispiel
Um zu sehen, wie dieser Prozess aussieht, werfen wir einen Blick auf ein reales Beispiel, das ich für ein vorheriges Tutorial erstellt habe. Im Grunde ist der Effekt, den ich anstrebte, ein Kartenstapel.
Um es abzubauen, habe ich ein Element mit einem einfachen Stil erstellt und dann: before und: after verwendet, um das Element zu duplizieren. Das Ergebnis war ein Stapel von drei Karten einer einzigen Klasse. Hier ist der Code, der sich daraus ergab:
Ich stelle dieses Problem immer wieder fest, wenn: Vorher und Nachher. Ich baue jedes Element einzeln, mache einen Schritt zurück und stelle fest, dass ich im Grunde den gleichen Code dreimal geschrieben habe!
Alles, was wir tun müssen, um dies aufzuräumen, ist etwas, das jedes Schulkind tun könnte: Erkennen Sie die Wiederholung. Im obigen Code hat jede Karte die gleiche Höhe, Breite, Schatten, Farbverlauf und Randradius. Der gesamte Code sollte nur einmal geschrieben werden. Wir können das so zusammenfassen:
Hierbei werden die Eigenschaften und Werte berücksichtigt, die sich auf allen drei Karten wiederholen, es gibt jedoch auch eine gewisse Redundanz, die nur zwischen den Pseudoelementen besteht. Lassen Sie uns als nächstes darauf aufpassen.
Nachdem wir den gesamten Inhalt zusammengestellt haben, können wir ihn aus den anderen Abschnitten entfernen, in denen er wiederholt wurde. Hier ist der vollständige, getrimmte Code-Block:
Wie Sie sehen, haben wir in einem kleinen Beispiel fast zwanzig Zeilen Code ausgeschnitten! Denken Sie darüber nach, wie viel Einfluss diese Prinzipien im Verlauf einer gesamten Website haben.
Einfache Wartung
Zu oft werden Prinzipien wie die, die wir heute lernen, als Regeln präsentiert, die einfach befolgt werden müssen, nur weil Sie so sind sollte mach es Für die meisten Leute ist dies kein überzeugendes Argument. Wer kümmert sich um gängige Praktiken und um das Wohl der Guten? Was ist drin für mich?
? Sie sparen sich viel Zeit und Mühe, indem Sie diese Techniken verwenden.?Die gute Nachricht ist, dass schlankeres CSS auf lange Sicht wesentlich einfacher zu warten ist. Sie sparen sich mit diesen Techniken viel Zeit und Ärger. Stellen Sie sich zum Beispiel vor, Sie hätten den Originalcode aus dem obigen Beispiel geschrieben und beschlossen, die Verlaufsfarben zu ändern. Für diese einfache Änderung müssen Sie achtzehn Codezeilen durchgehen und aktualisieren!
Stellen Sie sich vor, Sie müssten das gleiche an unserem prägnanten Beispiel tun, hier müssen Sie nur sechs Codezeilen aktualisieren. Zugegeben, die Gradientensyntax- und Browserpräfixsituation ist immer noch schwer, aber sechs sind besser als achtzehn.
Überdenken Sie Ihre Code-Struktur
Bevor wir das zusammenfassen, sollten Sie darüber sprechen, dass es unzählige Möglichkeiten gibt, Ihr CSS schlanker zu machen. Dies ist eine breite Kategorie von Diskussionen, die definitiv nicht auf die oben genannten Techniken beschränkt ist.
Zum Beispiel haben viele Codierer Systeme entwickelt, mit denen Sie verschiedene Codetypen absichtlich trennen, wenn Ihr CSS im Namen der Effizienz steht. Eine Möglichkeit, dies in unserem Original-Box-Beispiel zu tun, könnte darin bestehen, den beliebigen visuellen Stil vom strukturellen CSS zu trennen. Nach dieser Route würde unser Code folgendermaßen aussehen:
Hier haben wir eine Basisbox entwickelt? Klasse, die auf mehrere HTML-Elemente angewendet wird, von denen jedes auch mit einer Strukturklasse gepaart wird, die die Form, Positionierung, Stapelreihenfolge usw. der Box definiert. So ziemlich alles, was keine Augenweide ist.
Offensichtlich wird der Kompromiss hier ein wenig mehr Markup sein. Sie werden feststellen, dass sich die Codierer stark davon unterscheiden, ob es akzeptabel ist, im Namen eines effizienteren CSS sogar ein einzelnes Zeichen für zusätzliche Markierungen hinzuzufügen.
Beliebte Denkschulen
Derzeit gibt es zwei sehr beliebte Ideen oder Methoden, um die Strukturierung unserer Stylesheets zu überdenken: OOCSS (Object Oriented CSS) und SMACSS (Skalierbare und modulare Architektur für CSS).
Diese Methoden sind zwar ziemlich unterschiedlich, aber sie sind recht konzeptionell ähnlich. Beide Methoden helfen Ihnen dabei, effizienteres, wartungsfähigeres und sogar wiederverwendbares CSS zu erstellen. Ich empfehle Ihnen dringend, beide näher zu betrachten, um zu sehen, was Sie denken.
Wie schreibt man Lean CSS?
In den obigen Beispielen haben wir alles darüber erfahren, wie Sass eine magische Funktion namens @extend verwendet, mit der Sie mit sehr wenig Aufwand schlankeren Code schreiben können. Außerdem erfahren Sie, wie wir die Prinzipien dieser Funktion verwenden können, um diese Funktionen mit einfachem alten CSS auszuführen. Wir haben auch kurz die Idee diskutiert, Ihre Code-Struktur komplett neu zu bewerten, um etwas Modulareres und Wartbareres zu schaffen.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von diesen Methoden halten. Benutzt du Sass? Wie oft gruppieren Sie Selektoren, um die Redundanz zu reduzieren? Was halten Sie von OOCSS und SMACSS? Welches ist besser?