Best Practices für CSS: Neun Anzeichen für ein schlechtes CSS

CSS oder Cascading Style Sheets - Die Sprache, die definiert, wie eine Webseite aussehen und sich manchmal verhalten soll. Es wird von Webentwicklern oft als „einfache“ Sprache übersehen, die nicht allzu viel Aufmerksamkeit erfordert. Wenn Sie sich einige der häufigsten Eigenschaften merken, ist der allgemeine Fluss und das googeln dunklerer Eigenschaften der richtige Weg. Erfahrene Entwickler wissen jedoch, dass keine Sprache übersehen werden muss, da es immer gute und schlechte Möglichkeiten gibt, etwas zu tun.

Mit CSS ist es sehr einfach, Dinge falsch zu machen, da es keinen Compiler gibt, der Fehler auslöst, keine Warnungen oder Hinweise für schlechte Implementierungen. Eine Programmiersprache wie JavaScript verfügt über eine Vielzahl von Tools, die eine gute Codequalität verfolgen. Einige werfen dem Entwickler sogar die Meldung zu, dass eine bestimmte Funktion nicht richtig implementiert wurde.

In diesem relativ kurzen Beitrag werden wir uns einige der häufigsten Probleme ansehen, mit denen Entwickler konfrontiert sind, und wie sie behoben werden können. Hier geht es nicht um bestimmte Implementierungsdetails für eine bestimmte visuelle Komponente. Stattdessen konzentriert sich die Liste auf Denkprozesse, Architektur und Ansätze.

Die CSS-Komplexität

Ist CSS schwer? Nein! Auf keinen Fall, es gibt ein paar sehr grundlegende strukturelle Regeln. Sie haben Selektoren (Klasse, ID, Element), Sie haben Eigenschaften und Sie haben Gültigkeitsbereich. Es ist weit weniger als eine Sprache wie C, Java oder PHP. Ein Entwickler kann die gesamte Idee in wenigen Minuten nach dem Lesen und Starten des Stylings erfassen. Um den Unterschied zwischen Rand und Polsterung zu kennen, können Sie sich natürlich w3schools ansehen, aber wann Sie diese verwenden müssen, erfordert einige Erfahrung. Aber es ist keine Raketenwissenschaft.

Was die Dinge etwas komplexer macht, sind die Art und Weise, wie Selektoren um die nächste überschreiben und wie sich eine Eigenschaft auf eine andere auswirkt (Anzeige: Block vs. Anzeige: Inline zum Beispiel). Dann haben wir kleinere Details wie das Reduzieren von Rändern, das Stapeln von Z-Indizes, die Eigenschaften der GPU im Vergleich zur CPU-Leistung, das Box-Modell und die Typografie-Eigenschaften.

Darüber hinaus sind neue CSS-Funktionen, die in Browsern nicht immer auf die gleiche Weise implementiert werden, einige sogar gar nicht implementiert, und andere erfordern andere Eigenschaften.

Wenn wir uns die beiden obigen Absätze ansehen, werden wir sehen, wie die beiden Hauptphasen der Front-End-Entwickler bei der Arbeit mit CSS getroffen werden. Eine lautet: „ Oh, ist das alles? "Und der zweite ist" Oh ****, das war noch nicht alles ". Dies bedeutet „CSS-Komplexität“.

Es gibt viele kleine Dinge, die miteinander verflochten sind und sich nur schwer skalieren lassen. Wenn Sie nur eine Komponente erstellen, ist dies ganz einfach: Sie gestalten alles, was Sie sehen, und es funktioniert. Wenn Sie diese einzelne Komponente jedoch in eine größere Anwendung einfügen, werden zusätzliche Stile angewendet. Möglicherweise haben Sie dieselbe Klasse wie etwas anderes (z. B. .button), und Ihre Stile werden auf die gesamte Anwendung angewendet, wodurch alles beschädigt wird. Es ist stressig!

WordPress CSS: Grundlegender Leitfaden für Anfänger

Wie schreibe ich CSS: Kampf gegen seine Komplexität

Es gibt einige Lösungen, die kluge Köpfe gefunden haben. Ein Überblick wäre:

• CSS-Namenskonventionen wie BEM, SMACSS und andere, die Regeln für Klassennamen definieren, die die Möglichkeit von Konflikten verringern würden.
• CSS in JS ist eine neuere Methode, mit der Sie CSS-Komponenten praktisch in JS-Dateien schreiben können (klingt schlecht, sieht schlecht aus, ist aber zumindest sinnvoll). Meist gültig mit React, Vue und anderen.
• CSS-Module sind ein vernünftigerer Ansatz für CSS in JS für jemanden, der alle Stile in einer Datei hat. CSS-Module kapseln die Stile der einzelnen Komponenten, sodass sie nicht an andere Komponenten weitergegeben werden können, was die Wiederverwendbarkeit erheblich vereinfacht. Es reduziert auch den Stress um ein Vielfaches!

Die erste - Namenskonvention ist wahrscheinlich am schwierigsten zu implementieren, da sie keine Tools enthält, die Ihnen helfen könnten. Es bleibt Ihnen als Entwickler überlassen, die Konvention zu verstehen und anzuwenden . Man muss immer noch an Klassennamen denken, sie sollten immer noch nicht zusammenstoßen und dann muss man das ganze Team dazu bringen, ihm zu folgen. Ziemlich schwer!

CSS in JS- und CSS-Modulen sind Implementierungskorrekturen. Sie ändern die Code-Ausgabe als Ganzes, was es praktisch unmöglich macht, Stile zu verlieren. Sie erfordern jedoch ein völlig anderes Denken und Aufbau, was nicht immer machbar oder erwünscht ist.

Der beste Rat hier wäre: Studieren Sie die gängigsten und erfolgreichsten Namenskonventionen und verwenden Sie die, die den Codierungsstandards Ihres Unternehmens oder Ökosystems entspricht. Verstehen Sie die Komponententrennung und denken Sie über Umfang und einzelne Einheiten nach, die eine große App bilden. Keine große App von Anfang an, das wäre unmöglich zu verwalten.

Wenn Sie an einem Stapel arbeiten, der eine Bibliothek wie React oder ein Framework wie Vue enthält, suchen Sie nach zusätzlichen Tools, mit denen Sie Ihre Stile damit verwalten können. Für jeden CSS-Entwickler für Anfänger bis Fortgeschrittene wäre dies eine große Hilfe! Und vielleicht möchten Sie sie niemals fallen lassen, es sei denn, Ihnen kommt etwas Besseres in den Weg.

Halten Sie ein Auge auf neue Werkzeuge! Sie hindern uns daran, Probleme zu bekämpfen, die die Entwicklergemeinde bereits gefunden, behoben und eine Möglichkeit gefunden hat, mit ihnen umzugehen.

Nachdem wir nun dargelegt haben, was CSS-Komplexität bedeutet, und einige erste Tipps zur Bekämpfung gegeben haben, wollen wir einen detaillierteren Überblick geben und direkte Beispiele liefern.

Tipps zum Website-Design: So steigern Sie Ihr Spiel im Webdesign

Neun Anzeichen für ein schlechtes CSS

Diese Liste ist definitiv nicht vollständig, noch lange nicht. Leider werden Sie mit unzähligen anderen Problemen konfrontiert sein und hoffentlich direkte Lösungen für ein bestimmtes Problem auf Websites wie Stackoverflow finden.
Wenn Sie jedoch Ihr Spiel verbessern möchten und ein Problem mit einigen CSS-Zeilen beheben möchten, müssen Sie verstehen, was sie tun. Warum mussten Sie Ihr Markup ändern und warum mussten Sie einige Selektoren und Eigenschaften ändern?

Ränder wirken seltsam

Ein häufiges Problem für Entwickler ist, wenn zwei Elemente ihre Ränder nicht addieren (oben / unten). Zum Beispiel haben wir zwei <p> ​​-Elemente mit Rand: 20px 0;. Der Gesamtabstand zwischen ihnen beträgt 20 Pixel, nicht 40. Dies ist auf das Zusammenfallen des Randes zurückzuführen. Außer wenn die Elemente schweben oder absolut positioniert sind. Dieses "Außer" ist fast überall für fast jede Definition.

Z-Index: 9999999 und immer noch nicht über dem Z-Index: 1

Erstens besteht selten die Notwendigkeit, so hohe Z-Indizes zu schreiben. Ich habe sogar Werte wie 99999999999999 oder mehr gesehen. Erstens ist der Maximalwert des Z-Index 2147483647, sodass alles oben Genannte nutzlos ist. Zweitens funktioniert es nicht so. Welche Elemente oben liegen, wird durch den Stapelkontext definiert, nicht nur durch den Z-Index-Wert. Siehe die Grafik unten:

Nicht die richtigen Eigenschaften animieren

Es ist eine ziemlich einfache Frage, aber einige Entwickler haben Schwierigkeiten, wenn es um Animationen und den Ansatz geht. Was kann zuerst animiert werden? Alles, was einen Startwert, einen Endwert und alles dazwischen haben kann. Die Deckkraft ist eine solche Eigenschaft. Sie können bei 0 beginnen, bei 1 enden und unendliche Schritte zwischen 0,3, 0,6758, 0,9875 usw. hinzufügen. Sie können die „Anzeige“ nicht animieren, da zwischen Inline und Raster keine mittleren Schritte vorhanden sind.

Ineffiziente Animationen

Der häufigste Grund für schlechte FPS bei Animationen liegt in den falschen Eigenschaften, die animiert werden. Wenn Sie die Eigenschaft "left" eines absoluten Elements ändern, verwenden Sie die CPU zur Berechnung. Wenn Sie jedoch transform verwenden, ist dies die GPU. Und die GPU ist bekanntlich besser für Grafiken.

Aber wie würden Sie Schatten animieren, wenn es keine Alternative wie left / transform gibt? Animieren Sie die Deckkraft! Haben Sie zwei Elemente, eines mit Start, Zustand, eines mit Endzustand. Dann verblassen Sie den Anfang und das Ende. Dies würde es so aussehen lassen, als würde sich der Schatten ausdehnen, wo er tatsächlich nur ausgeblendet wird.

Animieren Sie nach Möglichkeit KEINE Elemente, die sich auf das Layout auswirken. Layoutberechnungen sind teuer und eine CPU kann nur eine begrenzte Anzahl von Berechnungen durchführen. Oft weniger als eine alle 16 ms, was zu FPS unter 60 führt.

Zu tiefe Selektoren

Was ist ein Modifikator? Eine Klasse, die Sie einer anderen Klasse hinzufügen und einige ihrer Eigenschaften ersetzen können. Beispiel: .button hat Farbe: rot. .knopf-primär, hat Farbe: blau. Wenn Sie also .button-primary zu .button hinzufügen, möchten Sie eine blaue Farbe erhalten. Kinderleicht. Obwohl es nicht jedes Mal so einfach ist. Und nicht jedes Mal ist es eine solche Komponente.

Manchmal möchten wir eine Komponente überschreiben, die einer anderen Komponente auf einer bestimmten Seite untergeordnet ist. Am Ende haben wir also ungefähr Folgendes: .Seitenname .Abschnittsname .Komponente-1 .Komponente-2 {…} Bereits vier Ebenen tief. Es stellt sich jedoch heraus, dass wir einfach .page-name .componen-2 {…} ausführen können. Kürzer ist besser! Denn wenn es passiert, dass Sie diesen neuen Stil aus irgendeinem Grund überschreiben müssen, müssen Sie nicht 5 Ebenen tief gehen, dann 6, dann mehr.

Deep Selectors sind beängstigend und die Leute verwenden am Ende! Wichtig. ! wichtig sollte verwendet werden, wenn Sie Inline-Stile überschreiben möchten, auf die Sie keinen Einfluss haben. Ansonsten ist es eine rote Fahne, dass Sie etwas nicht richtig machen.

Zu große Datei

Für eine große Anwendung gibt es natürlich viele Stile, und das ist völlig verständlich. Aber ist es immer so groß? Eine schlechte Methode zum Erweitern von Klassen in SASS (durch Mixins) würde große Auswahlketten erzeugen, deren Scrollen einige Sekunden dauert, um sie alle anzuzeigen. Eine richtige Erweiterung würde diese Datei stark reduzieren. Könnte sogar die Größe verdoppeln.

Enthaltene Frameworks, von denen nur wenige Eigenschaften verwendet werden, sind ebenfalls ein häufiger Grund für große Dateien. Wenn Sie Bootstrap / Foundation, Font-Awesome, Animate.css und einige andere ähnliche Frameworks / Bibliotheken zusammenfassen, erhalten Sie eine riesige Datei, aus der Sie ungefähr 2% verwenden. Räumen Sie auf, halten Sie es sauber und verwenden Sie nur das, was wirklich benötigt wird. Oft ist nicht einmal ein Framework erforderlich.

Framework, wenn es nicht benötigt wird

Bootstrap, Foundation, UIKit und alle anderen Frameworks sind großartig! Sie lösen ein echtes Problem und sind für die Webentwickler-Community äußerst wertvoll. Es ist nicht erforderlich, HTML oder CSS so gut zu kennen, um Dashboards und Websites zu erstellen. Aber gehen Sie von diesem Fall weg, schreiben Sie etwas CSS und Sie werden auf einige Probleme stoßen.

• Sie müssen richtig verstehen, wie man sie erstellt und wie man sie einbezieht
• Sie müssen die Dokumentation lesen, um die benutzerdefinierten Einstellungen und Mixins zu finden, die sie bereitstellen.
• Sie müssen dem Markup folgen und Ihrem Team dies beibringen.
• Sie müssen wirklich verstehen, wie man erweitert und gestaltet, um eine einzigartige Ansicht zu erstellen.

Um sie richtig einzuschließen, verwenden Sie nur das, was Sie benötigen. Damit Ihnen ein solches Framework hilft, anstatt Ihnen zu verbieten, benutzerdefinierte Elemente zu erstellen, müssen Sie wissen, dass das Innenleben besser als der Durchschnitt ist. Um ein benutzerdefiniertes Design zu erzielen, müssen Sie Einstellungen und Eigenschaften ändern. Und dann schreiben Sie ein benutzerdefiniertes CSS. Und dieses benutzerdefinierte CSS, um alles zu überschreiben, was das Framework bietet.

Wenn also ein solches CSS-Framework nicht wirklich benötigt wird, es aber immer noch eines gibt und es nicht richtig genutzt wurde, ist dies eine rote Fahne, dass etwas nicht stimmt. Und wenn Sie einmal damit beginnen, werden Sie es höchstwahrscheinlich bis zum Ende des Projektlebenszyklus verwenden. Es ist also eine wichtige Entscheidung.

Inhalte dürfen keine Größe definieren

Dieses Problem ist eher ein Problem für Anfänger, aber es ist sehr häufig. Sie sollten dem Inhalt die Freiheit geben, die er verdient.

Beispiel: Sie möchten die width- Eigenschaft der Site nicht auf 1200px festlegen. Sie möchten die maximale Breite auf 1200px einstellen. Auf diese Weise kann Ihre Site über das Ansichtsfenster reagieren.

Dann sollte ein Eingabefeld keine Höhe von 40 Pixel haben, sondern eine 1em-Auffüllung. Nun, die Schriftgröße, der Inhalt definiert die Größe. Und wenn der Inhalt im Inneren wächst, wird das Element nicht brechen.

Diese Denkweise bei der Definition von Größen bleibt für die gesamte Anwendung wichtig. Und jede Eigenschaft muss es berücksichtigen. Stellen Sie im Idealfall nicht% für die Breite des Inhaltsbereichs ein, da Sie dann auch Medienabfragen schreiben müssen.

Wenn Sie die maximale Breite hatten und Ihr Browser unter diese maximale Breite schrumpft, füllt der Inhalt die Browserbreite aus und schrumpft dann normal. Andernfalls müssten Sie eine Medienabfrage für diese Größe schreiben. Und dann für jede andere benutzerdefinierte Größe, die auf der Website geschrieben ist. Dies ist eine Komplexität, die aufgrund des schlechten Ansatzes hinzugefügt wird. Fast das gleiche wie alle anderen Punkte, die wir bereits besprochen haben.

JavaScript-Hacks

JavaScript kann Wunder wirken! Aber es wird nicht immer benötigt. Sie können so viel mit nur CSS tun, das gut unterstützt wird, keine Funktionalität erfordert (die am besten automatisch danach getestet wird) und nicht erfordert, dass Ihre anderen FE-Mitglieder auch JS kennen.

Natürlich gibt es die Standard-Umschaltfunktion, bei der Sie mithilfe eines Kontrollkästchens die Stile ändern können, wenn: aktiviert ist, die Hintergrundüberlagerung leicht ausgelöst werden kann und Eigenschaften wie Zähler zum Erstellen von mehr als einfachen <ol> -Listen vorhanden sind .

Hier wird empfohlen, zuerst nach CSS-Lösungen zu suchen. Angenommen, Sie möchten ein Popup erstellen. Es erscheint in der Mitte (Position: fest). Dann möchten Sie es über das Symbol [X] schließen oder wenn Sie darauf klicken. In JS müssten Sie Ereignisse schreiben, die nur den Popup-Inhalt auslösen. Aber immer noch auf dem [X] auslösen, das sich im Popup-Inhalt befindet.

Stattdessen können Sie in CSS einfach ein weiteres <div> mit 100vw, 100vh Größe und Z-Index direkt unter dem Popup schreiben. Dann können Sie einfach auf dieses Div in JS abzielen, das ein Einzeiler ist.

Ein weiteres Beispiel: Sie möchten eine Schaltfläche, die Sie in den Inhalt einfügen können, um den darauf folgenden Inhalt zu erweitern. Einfach mit CSS, etwas komplexer mit JS. Mit CSS können Sie Folgendes tun:

 Label.button - formatiert die Schaltfläche visuell.

 Eingabe: nicht (: markiert) ~ * {Anzeige: keine} - alles danach im selben Container verstecken.

Für dieses Bit "im selben Container" benötigen Sie eine benutzerdefinierte Logik in JS. Sie müssen auch alle Elemente auswählen, für die der DOM-Baum durchlaufen werden muss. Und dann wenden Sie CSS-Stile auf sie an, die im style = ”” -Tag enden würden, was wiederum erforderlich wäre! Wichtig, wenn Sie sie aus irgendeinem Grund ansprechen müssen. In CSS ist es zum Glück sehr einfach.

Der Weg zu einem guten Webdesigner

Fazit

Wie Sie sehen können, sind dies nur sehr wenige häufige Probleme. Um sie alle abzudecken, wäre ein Buch erforderlich. Aber hoffentlich geben sie Ihnen einen guten Ausgangspunkt und erinnern Sie daran, über mögliche Probleme nachzudenken, die aufgrund des falschen Ansatzes auftreten könnten. Das Auffinden solcher Probleme erfordert eine Menge Erfahrung und viel Lesen. Und wenn Sie hier zu dem Schluss gekommen sind, dann sind Sie mit dem Lesen auf dem richtigen Weg, jetzt ist es Zeit zu üben!