CSS vs. JavaScript: Vertrauen vs. Kontrolle

Als GotoConf Amsterdam mich zum Sprechen aufforderte, dachte ich, dass es sich um ein weiteres maschinelles Lernen oder ein Progressive Web Apps-Gespräch handelt. Stattdessen haben mich die Organisatoren gebeten, CSS zu behandeln. Eine unterrepräsentierte Sprache in ihren „Programmiersprachen“. Jetzt war ich von Anfang an ein Fan von CSS. Ich bin davon ausgegangen, dass die Teilnehmer einer Konferenz zur Kernentwicklung nicht so aufgeregt sind. Sie hätten CSS nicht im Detail betrachtet. Stattdessen ging ich davon aus, dass es für sie eher ein notwendiger Ärger ist. Also schrieb ich einen Vortrag darüber, was CSS bedeutet und wie wir es nicht zu unseren Stärken nutzen.

Hier sind die Notizen meines Vortrags.

Ein langweiliger Kampf

Neulich habe ich mir wieder „Captain America: Civil War“ angesehen. Und wieder langweilte es mich und ich verstand das Konzept nicht ganz. Die Idee von Superhelden, die gezwungen sind, für ihren Kollateralschaden verantwortlich zu sein, ist nicht neu. Die Kontrolle über sie anzufordern ist auch nicht neu. „The Incredibles“ haben damit einen tollen Job gemacht.

Mir war langweilig, dass all diese coolen Superhelden gegeneinander kämpfen. Wir kennen ihre Kräfte. Wir wissen, dass sie tiefe Freunde sind, die sich unzählige Male das Leben gerettet haben. Wir wissen, dass ihre Kräfte übereinstimmen. Es gibt keine Gewalt, keinen wirklichen Antrieb, keine Wut in diesen Begegnungen. Es fühlt sich so an, als hätte Marvel zu viele coole Charaktere eingeführt und versucht nun einen Weg zu finden, um die Leute auf die Seite zu stellen. Verkaufe mehr Spielsachen und erschaffe ein künstliches Drama.

Ich habe den gleichen Eindruck, wenn wir über die Verwendung von CSS oder JavaScript für das Layout sprechen. Beide haben ihre Vorzüge, beide haben ihre Kräfte. Beide haben Fangemeinden, die bereit sind, die detailliertesten Informationen zu sammeln, um sich übereinander zu verbreiten. Aber ich finde das langweilig. Beide zusammen haben das Web nach vorne gebracht. Und es hält uns zurück, dass es zwei massive Lager gibt. Ein Ende sieht CSS als Vergangenheit an und in unserer modulgesteuerten Welt sollten wir alles in einem Skriptbereich tun. Der andere sieht in CSS und seinen Präprozessoren und dem Erstellen von Skripten mehr als genug, um alles zu erledigen. Erinnerst du dich an die DHTML-Tage, als wir alles mit JavaScript gemacht haben? Erinnern Sie sich an das Spiel "Nur CSS-Lösungen"? Wann haben wir (ab) Kontrollkästchen für komplexe Interaktivität verwendet, um die Verwendung von JavaScript zu vermeiden?

Giana Blantin drückte es schön aus:

Können diese beiden Gruppen:
 "CSS ist so einfach, dass es nicht einmal codiert."
 "CSS ist so schwer, wir müssen es durch JS ersetzen!"
 bitte miteinander reden

Viele der Missverständnisse von CSS liegen darin, dass Entwickler nicht verstehen, wie sie sich von der Programmierung unterscheiden. Stattdessen fummeln wir daran herum und ändern die Dinge. Nachdem wir etwas zerbrochen haben, stellen wir fest, dass es nicht gut genug ist und wir es ersetzen müssen.

Oft ist dies ein Überschießen der Marke. Ähnlich wie bei der Verwendung von OpenGL für die einfache Erstellung von Verläufen müssen wir die großen Geschütze nicht ständig herausbringen. CSS hat ein paar Tricks parat, die wir mit clientseitigem Scripting nicht vergleichen können. Und es hat nichts mit Syntax oder Sprachfunktionen zu tun. Es geht darum, Verantwortung zu teilen.

Wer ist schuld und wer sollte tolerant sein?

CSS ist ähnlich wie HTML fehlertolerant. Das kann verwirrend sein. Dies bedeutet, dass Endbenutzer nicht unter den Fehlern des Entwicklers leiden sollten.

Mit CSS erstellte Produkte werden immer noch angezeigt, wenn der Entwickler einen Fehler gemacht hat. Sie sehen nicht perfekt aus, funktionieren aber. Wenn ein CSS-Parser auf eine Eigenschaft stößt, versteht er diese nicht - er überspringt sie. Wenn es auf einen Wert stößt, mit dem es nicht umgehen kann oder der von der Eigenschaft nicht unterstützt wird, überspringt es diesen. Auf diese Weise bleiben wir abwärtskompatibel.

Eine Schaltfläche mit einer Hintergrundfarbe und einem Farbverlauf zeigt die Farbe in älteren Umgebungen an. Es wird auch in Umgebungen angezeigt, in denen Farbverläufe aufgrund von Leistungsproblemen nicht unterstützt werden. In schnelleren, hifi- und unterstützenden Umgebungen ist ein Gefälle zu erkennen.

Sie müssen die Umgebung nicht kennen und diese Entscheidung auch nicht treffen. Das Betriebssystem, der Browser und die beteiligten Proxys treffen diese Entscheidungen für Sie.

JavaScript ist nicht fehlertolerant. Das kann katastrophal sein. Mit JavaScript haben Sie viel mehr Kontrolle. Sie sind aber auch viel verantwortungsbewusster.

JavaScript auf dem Client kann aus Dutzenden von Gründen unterbrochen werden. Der Browser kann nicht unterstützend sein, die Verbindung kann unzuverlässig sein. Der Mobilfunkanbieter, den Ihre Endbenutzer haben, sieht es möglicherweise als seine Aufgabe an, Skripte zu minimieren und zu packen, die über die Leitung gehen. Wenn JavaScript auf etwas stößt, das es nicht versteht, bricht es. Es wird verpackt und zeigt nichts an, wodurch der Benutzer Ihres Produkts für Ihre Fehler bestraft wird. Oder diese Fehler, die von den anderen Personen und Skripten verursacht wurden, indem Sie Ihren Code an die Endbenutzer weitergeben.

Mit anderen Worten:

  • CSS - Sie wenden Ihre Stile an und hoffen, dass es funktioniert hat.
  • JavaScript - Sie steuern das Styling und können und sollten überprüfen, ob es funktioniert

CSS bedeutet, die „Quetschbarkeit“ des Webs zu akzeptieren, wie Brad Frost es ausdrückte. Das Web ist keine feste Leinwand, auf der Sie Pixel einstellen können. Viele Dinge liegen außerhalb Ihrer Kontrolle:

  • Die Browser Ihrer Benutzer
  • Die Auflösung, Pixeldichte und Farbeinstellungen ihrer Geräte
  • Ihre Verbindungszuverlässigkeit und Geschwindigkeit
  • Ihre Verbindungseinschränkung - Ressourcenblockierung ist eine Sache
  • Ihre Schriftgröße und Zoom benötigt
  • Die Verfügbarkeit von Ressourcen auf ihren Computern für Ihr Produkt (brennt die CPU bereits?)
  • Die Menge an Textinhalten und Bildgrößen in Ihrem Produkt - CMS jemand?

Dies kann einschüchternd sein und wir möchten oft die Umgebung kontrollieren, in der unsere Produkte laufen - schon allein, um unseren Verstand zu wahren. Dies bedeutet jedoch, dass wir viele potenzielle Benutzer blockieren.

In diesem unbekannten Umfeld müssen wir entscheiden, wer den Job übernimmt, um seine Leistungsprobleme zu lösen:

  • CSS - Es ist die Aufgabe des Browsers, gute Leistung zu erbringen, GPU-Ressourcen zu nutzen und Funktionen zu überspringen.
  • JavaScript - Es ist Ihre Aufgabe, den Support zu testen. Und um sicherzustellen, dass das Rendern, Malen und Aufschmelzen schnell vonstatten geht. Und um die Animation synchron zu halten.

CSS kann das verdammt gut und Browserhersteller geben sich viel Mühe, um die Leistung der Benutzeroberfläche zu optimieren.

Warum unterschätzen wir CSS und überschätzen die Vorteile von JavaScript? Ich denke, eine Sache, die schuld ist, ist ein Klassiker - der Internet Explorer.

CSS und seine holprige Geschichte

CSS musste schnell erwachsen werden und wurde von den Browsern nicht so gut unterstützt, dass es ein zuverlässiges Tool sein musste.

CSS war anfangs sehr begrenzt und sollte visuelles HTML und Attribute ersetzen. Beginnen Sie alle diese Schriftarten, BGColor, Ausrichten, Zentrieren, HR und Freunde. Patchy-Browser-Unterstützung und sehr merkwürdige Fehler ohne Debugging-Optionen halfen nicht. Wir wussten, dass die Dinge falsch liefen, konnten aber nichts dagegen unternehmen. Wir konnten niemanden fragen, da die Browser-Hersteller nicht für Feedback zur Verfügung standen.

Als das iPhone herauskam, stand CSS im Rampenlicht. Die Geschichte „HTML5 ist die Zukunft“ benötigte viele zusätzliche Funktionen. Da Apple dort das Sagen hatte und die Standardisierung zu lange dauerte, handelte es sich um „nur Webkit“.

Dies bedeutete Präfixe in CSS und erneut die Suche nach verschiedenen Rendering-Engines. Browserhersteller waren innovativ und dominierten andere mit vorangestellter Funktionalität. Als Entwickler bedeutete dies Wiederholung und einen Supportplan für jeden von ihnen auswählen zu müssen. Und natürlich einen, der ältere, veraltete Browser unterstützt. Diese neuen Browserkriege um Präfixe sorgten für viele Argumente und Verwirrung.

Und last but not least gab es bis vor kurzem kein Layoutmodell in CSS. Stattdessen haben wir mit Positionierung und Floating gehackt. Eine Positionierung, insbesondere eine absolute Positionierung in Pixeln, ist im Web nicht sinnvoll. Die Größe der Schrift kann geändert werden, und der Inhalt überlappt. Das Positionieren mit Floating benötigt Clearing-Elemente.

Es ist nicht das, was Sie als zuverlässige Basislinie bezeichnen, oder es war einfach zu verstehen, wenn Sie nicht "web-native" sind.

Wir mussten dafür sorgen, dass CSS unabhängig von der Browserunterstützung funktioniert

Unsere Lösung bestand darin, mit JavaScript zu patchen. Wir können Bedingungen auslesen und darauf reagieren, indem wir HTML erstellen und Stile anwenden. Da JavaScript eine Programmiersprache ist, haben wir die volle Kontrolle darüber, was passiert. Wir haben Bedingungen, Schleifen, Vergleiche - all die Dinge, die ein Programmierer in CSS vermisst. Dies ist bis zu einem gewissen Grad ein Missverständnis von CSS als Konzept. Ein Selektor, der mehreren Elementen entspricht, ist im Wesentlichen eine Schleife. Wir können sogar: nth-child () verwenden, um ein Element in einer Sammlung als Ziel festzulegen.

Im Allgemeinen hat CSS große Fortschritte gemacht, seit wir JavaScript zum Patchen verwenden mussten. Besonders enttäuschende Browserunterstützung ist ein viel kleineres Problem.

  • Immergrüne Browser sind eine Sache - alle Browser befinden sich auf einem ständigen Upgrade-Pfad. Wir erfahren sogar von den Browsern, was auf uns zukommt.
  • Browser-Tools geben detaillierte Einblicke, welche CSS auf was angewendet wird. Wir bekommen sogar visuelle Tools wie Animationseditoren und Farbwähler.
Visueller Editor für CSS-Animationen in Firefox Developer Tools
  • CSS-Unterstützung für alle Browser ist gut dokumentiert: caniuse.com ist eine unglaubliche Ressource. Es wird nicht nur angezeigt, welcher Browser und welche Umgebung was unterstützt. Es erklärt auch Fehler in den Implementierungen, bietet Links zu den Spezifikationen und den Fehlerberichten. Es gibt sogar eine API, um diese Informationen in Dokumentations- und Entwicklertools einzubetten.
Mit einer Erweiterung für Visual Studio Code können Sie Informationen zur Browserunterstützung von Funktionen direkt im Browser abrufen. Sie erfahren, wen Sie beim Codieren blockieren.
  • Wir haben Support-Kanäle und Bug-Tracking für fast alle Browser. Einige erlauben Ihnen sogar, einen Fehler über Twitter zu melden. Die Teams der Browserhersteller sind in den sozialen Medien aktiv und erreichbar.
  • Pre-Prozessoren wie Sass und Less haben die Innovation in der CSS-Spezifikation beschleunigt. Ähnlich wie das von jQuery inspirierte JavaScript von heute, führen diese zu Funktionen, die von Menschen gewünscht werden.
  • Die Community verbringt viel Zeit damit, CSS wartungsfreundlicher zu machen. Ansätze wie objektorientiertes CSS von Nicole Sullivan und Atomic Design von Brad Frost gibt es schon seit Ewigkeiten und sollten helfen, die Komplexität zu reduzieren.

Was CSS für Sie tun kann

Hier sind einige erstaunliche Dinge, die CSS jetzt tun kann und die Sie in Betracht ziehen sollten.

Berechnete CSS-Werte

Eine Sache, die in CSS immer zu fehlen schien, war die Berechnung von Werten. Das klassische Beispiel ist ein absolut positioniertes Element, das 100% breit ist, aber eine Polsterung benötigt. In früheren Zeiten mussten wir dies tun, indem wir ein anderes Element verschachtelten und das Polster auf dieses aufbrachten. Seit einiger Zeit können wir dafür CSS calc () verwenden und eine Breite von calc (100% - 1em) anwenden.

Berechnungen werden in allen Browsern sehr gut unterstützt. Es sollte keine Bedenken geben, sie zu verwenden.

Medien-Anfragen

Mit CSS Media Queries können Sie auf Änderungen im Ansichtsfenster des Dokuments reagieren. Im Wesentlichen bedeutet dies, dass Sie einen Teil Ihres Stylesheets anwenden, wenn das Ansichtsfenster bestimmte Kriterien erfüllt. Dies kann ein Ansichtsfenster sein, das mindestens eine bestimmte Breite oder höchstens eine bestimmte Höhe hat. Sie können auch prüfen, ob der Bildschirm im Hoch- oder Querformat angezeigt wird oder ob es sich bei dem Dokument um einen Ausdruck handelt.
 CSS Media Queries haben in matchMedia ebenfalls ein JavaScript. Auf diese Weise können Sie Inhalte bei Bedarf laden. Ein Problem bei Media Queries ist, dass Browser Bilder unabhängig von der Übereinstimmung in Blöcken laden.

Generierter Inhalt

Mit den :: vor und :: nach Pseudo-Selektoren in CSS können Sie rein visuelle Inhalte erstellen. Auf diese Weise können Sie sicherstellen, dass aus kosmetischen Gründen keine eigenen, leeren DIV-, SPAN-, B- oder I-Elemente erforderlich sind. Auf diese Weise können Sie alle visuellen Elemente im Stylesheet und nicht in Skripten oder im HTML-Dokument beibehalten. Sie können dies mit Schlagschatten, Verläufen und anderen CSS-Funktionen kombinieren, die visuelle Effekte erzeugen. Ein eindrucksvolles Beispiel dafür ist „A Single DIV“. Diese Website zeigt Dutzende von Bildern, die aus einem einzelnen DIV-Element erstellt wurden.

Diese Grafik wird mit einem einzelnen DIV-Element erstellt

Animationen und Übergänge

Animationen und Übergänge in CSS waren der große Durchbruch, als das iPhone herauskam. Übergänge ermöglichen Ihnen einen reibungslosen Wechsel von einem Zustand in einen anderen. Sie müssen nicht wissen, welche Änderungen vorgenommen werden sollen. Sie teilen dem Browser lediglich mit, wie lange der Übergang dauern soll und welche Beschleunigungsfunktion verwendet werden soll. Animationen ermöglichen eine genauere Steuerung. Sie definieren Keyframes und was soll wie animiert werden. Sowohl Animationen als auch Übergänge lösen Ereignisse vorher, während und nachher aus. Auf diese Weise können Sie vorhersehbar mit JavaScript interagieren. Der Vorteil der Verwendung von CSS besteht darin, dass der Browser die Leistung der Animation sicherstellt. Dies geschieht, indem sie auf der GPU ausgeführt und die Bildrate gedrosselt werden, falls dies erforderlich sein sollte. Dies ist ein wichtiger Schritt, um eine gute Akkulaufzeit der Telefone Ihrer Benutzer sicherzustellen. Wenn Sie in JavaScript animieren, kann dies leicht schief gehen.

Ansichtsfenster-Einheiten

Medienabfragen sind sinnvoll, wenn Sie Erlebnisse detailliert definieren möchten. Stattdessen können Sie auch Ansichtsfenster-Einheiten verwenden, um die Größe der Elemente dem verfügbaren Speicherplatz anzupassen. Ansichtsfensterbreite (vw) ist ein Prozentsatz der gesamten Ansichtsfensterbreite. Auf einem 480px-Breitbildschirm beträgt 10vw also 10% oder 48px. Dies unterscheidet sich von der Einheit%, bei der es sich um den Prozentsatz des übergeordneten Elements und nicht um das Ansichtsfenster handelt. Geschachtelte Prozentsätze werden kleiner, vw nicht. Höhe des Ansichtsfensters (vh) ist ein Prozentsatz der vollen Höhe des Ansichtsfensters. Sie können sich mit vmin und vmax auch unabhängig von der Orientierung machen. Diese nehmen entweder das kleinere oder das größere von vw und vh. Das einzige Problem bei der Unterstützung von Ansichtsfenster-Einheiten ist, dass Edge derzeit vmin und vmax nicht unterstützt.

CSS Tricks hat einen großartigen Artikel darüber, wie mächtig Ansichtsfenster sein können. Von auflösungsunabhängigen Einbettungen bis hin zur ansichtsfensterabhängigen Typografie können Sie Ansichtsfenster-Einheiten verwenden, um hochflexible Schnittstellen zu erstellen.

Flexbox

Mit Flexbox können Sie das Layout von Elementen in CSS erstellen. Im Grunde ist es alles, was Menschen, die Layout-Tabellen behaupteten, in CSS leichter übersehen wurden - und vieles mehr. Sie können untergeordnete Elemente eines Elements rechts, links, oben oder unten ausrichten. Sie können sie definieren, um den verfügbaren Speicherplatz auszufüllen, wobei jeder dieselbe Menge oder mehr als die anderen verwendet. Sie können sie auch so definieren, dass sie den verfügbaren Abstand untereinander oder um sie herum nutzen. Es ist so flexibel wie es auf der Dose steht. Wenn Sie einen visuellen Editor haben möchten, um zu sehen, was das bedeutet, bietet Build With React einen großartigen Flexbox-Editor zum Spielen.

Mit dem Flexbox-Editor von React erstellen zeigt, wie leistungsfähig das Layout von Elementen mit dieser Technik ist

Es gibt auch ein Spiel namens Flexbox Froggy. Es vermittelt die Konzepte auf unterhaltsame und leicht zugängliche Weise und ist ideal für Kinder, um mit CSS zu beginnen.

Ein großartiger Vortrag über Flexbox ist der, den Zoe Gillenwater bei verschiedenen Veranstaltungen gehalten hat. Was mir an dem Vortrag am besten gefällt, ist, wie Zoe zeigt, wie sie Flexbox in der Produktion eingesetzt haben. Die Beispiele stammen von booking.com und zeigen Fallbacks für Browser, die dies nicht unterstützen.

CSS-Gitter

Wenn Flexbox die Antwort auf Layoutelemente in einer Zeile oder Spalte ist, bringt CSS Grid es auf die nächste Ebene. Mit ihm können Sie Elemente in einem definierten Raster in zwei Dimensionen auslegen, sowohl in Zeilen als auch in Spalten. Grid kocht schon eine Weile und wird nun endlich auf ganzer Linie unterstützt.

Die Flexibilität des Grids macht es schwierig, eine Vielzahl von Optionen zur Auswahl zu haben. Der mit Abstand einfachste Einstieg ist Rachel Andrews Ressource "Grid by Example". Hier finden Sie Beispiele für Rasterlayouts zum Kopieren und Einfügen. Viele von ihnen bieten Fallbacks für nicht unterstützte Browser. Schulungsvideos, die die Vor- und Nachteile erläutern, machen es zu einer erstaunlichen Ressource.

Wenn Sie mit Herausforderungen besser lernen, können Sie CSS Grid verstehen, indem Sie den CSS Grid Garden spielen.

Es gibt einige "must see" -Vorträge über CSS-Grids im Internet. Das erste ist „CSS Grid Layout“, ebenfalls von Rachel Andrew.

Jen Simmons geht einen anderen Weg. In ihrem Vortrag über "Real Art Direction im Web" zeigt sie, wie die Vielseitigkeit von Grid uns dabei helfen kann, aus unserem "Box-Layout" -Denken auszubrechen.

Das Mischen und Anpassen von Grid und Flexbox ist kein Problem. Es kann und sollte Flexbox in seinen Zellen verwenden. Zusammen ermöglichen diese Tools die Erstellung flexibler Layouts. Layouts, die variablen Inhalt ermöglichen und sich an den verfügbaren Platz anpassen. Web-Layouts.

CSS Benutzerdefinierte Eigenschaften (Variablen)

Eine der gefragtesten Funktionen von CSS, über die Präprozessoren wie Sass und Less lange verfügten, sind Variablen. Jetzt haben wir benutzerdefinierte CSS-Eigenschaften, die mich am meisten über CSS aufregen. Sie können wiederverwendbare Einstellungen einmal in Ihrem Dokument definieren und überall anwenden. Der häufigste Anwendungsfall hierfür sind benutzerdefinierte Farben und Größen. Sie können jedoch noch weiter gehen und Schriftarten und andere Typografien definieren. Sie können sie auch zum Verschachteln von Berechnungen in CSS verwenden. Dies war vorher nicht möglich. Eine erstaunliche Eigenschaft ist, dass benutzerdefinierte Eigenschaften auch dynamisch mit JavaScript festgelegt werden können.

Wie man benutzerdefinierte CSS-Eigenschaften mit JavaScript liest und schreibt - (Auszug aus Lea Verous Vortrag)

Wenn Sie alles über die erstaunliche Leistungsfähigkeit der benutzerdefinierten CSS-Eigenschaften erfahren möchten, sollten Sie auf keinen Fall einen Vortrag verpassen. Lea Verous "CSS-Variablen: var (- Untertitel)" ist ein Schatz an Informationen.

CSS-Funktionsabfragen

Eine weitere sehr willkommene Ergänzung zu CSS waren Feature-Abfragen. Diese funktionieren ähnlich wie Media Queries. Mit @supports prüfen Sie, ob der aktuelle Benutzeragent eine bestimmte Funktion unterstützt. Anschließend definieren Sie einen CSS-Block, der nur angewendet wird, wenn Feature-Unterstützung vorhanden ist. Dies mag sich seltsam anfühlen, da die Fehlertoleranz von CSS dies bereits berücksichtigen sollte. Was es tut, gibt Ihnen viel mehr granulare Kontrolle. Mit dem Schlüsselwort "not" können Sie auch einen Fallback definieren, wenn eine bestimmte Funktion nicht unterstützt wird.

CSS und JavaScript?

Das Zusammenspiel von CSS und JavaScript ist leistungsstark und das Richtige. Was CSS angeht, kann es immer noch nicht alles. Es gibt Szenarien, in denen die Natur von CSS im Gegensatz zu dem steht, was wir erreichen wollen.

Wie Cristiano Rastelli in seinem Vortrag "Let there be peace on CSS" erklärt, ist die beliebte Funktion "Separation of Concerns" in einer Modulwelt nicht anwendbar.

Als CSS zu einer Sache wurde, haben wir das gesamte Erscheinungsbild und Verhalten von HTML auf CSS und JavaScript verlagert. Wir definieren entweder auf Dokument- oder sogar auf Projektebene. Wir feiern die Tatsache, dass CSS von übergeordneten Elementen erbt. Wenn wir Komponenten bauen, die konsequent wiederverwendet werden können, wollen wir das nicht. Wir möchten, dass sie aussehen, sich anfühlen und sich verhalten, ohne benachbarte Personen zu verletzen oder von ihren Eltern zu erben.

CSS und JavaScript arbeiten in einer Welt ohne Komponenten zusammen

Wenn Sie dokumentenbasierte Lösungen entwickeln, gibt es keine Entschuldigung, sich nicht mit der Leistungsfähigkeit von CSS auseinanderzusetzen. Sie können und sollten JavaScript verwenden, um Informationen bereitzustellen, die CSS nicht in CSS einlesen kann. Es ist jedoch ratsam, dies auf möglichst unaufdringliche Weise zu tun.

Die Hierarchie, in der CSS und JS in diesem Szenario zusammenarbeiten, lautet wie folgt:

  • Verwenden Sie CSS, wenn Sie können - mit den Dingen, die Sie hier gesehen haben
  • Wenn Sie mit CSS kommunizieren müssen, sollten Sie die benutzerdefinierten Eigenschaften ändern
  • Wenn dies nicht möglich ist, wenden Sie Klassen mit classList auf übergeordnete Elemente an.
  • Als allerletzte Möglichkeit können Sie den Stil direkt ändern
Ein hervorragendes Beispiel, wie die Mausposition in JavaScript gelesen und in den benutzerdefinierten CSS-Eigenschaften gespeichert wird - (Auszug aus dem Vortrag von Lea Verou)

Denken Sie immer daran, dass Sie gegen den Browser arbeiten, wenn Sie Stile dynamisch ändern. Jede Stiländerung hat Konsequenzen für Reflow, Rendering und Painting. Paul Lewis und Das Surma pflegen einen praktischen Leitfaden namens CSSTriggers. Dieser beschreibt detailliert, welche CSS-Änderungen zu welcher Bestrafung des Browsers führen.

Mit CSS-Triggern erhalten Sie Informationen zu den Auswirkungen verschiedener Stiländerungen

In Summe

CSS ist viel zuverlässiger als früher und es gibt nicht mehr viel, was anders sein sollte als es ist. Das Wichtigste ist, dass CSS nicht das Gleiche tun soll wie JavaScript. Selbst Layoutsprachen funktionieren nicht so wie CSS und decken denselben Bedarf ab. Es hat eine ziemlich schwere Aufgabe und es macht es gut. Wenn Sie CSS verwenden, hilft Ihnen der Browser dabei, die Anforderungen Ihrer Endbenutzer unabhängig von deren Einrichtung zu erfüllen. Dies ist ein Kernprinzip des Webs und in den W3C HTML Design Principles definiert:

Benutzer über Autoren über Implementierer über Spezifizierer über theoretische Reinheit

Unsere Benutzer verdienen Schnittstellen, die reibungslos und zuverlässig funktionieren und die Batterien nicht kaputt machen. Betrachten Sie also CSS ein bisschen mehr. Sie können faul sein und auf der Arbeit der Community aufbauen.

Inspirierende und aktive CSS-Leute, denen man folgen kann

Bei der Recherche zu diesem Vortrag habe ich immer wieder auf Ressourcen zurückgegriffen, die von großartigen Leuten im Web geschrieben und gepflegt wurden. Hier ist eine kurze Liste in keiner bestimmten Reihenfolge von Leuten, denen Sie folgen sollten, wenn Sie mit Ihren CSS-Kenntnissen auf dem neuesten Stand sein möchten. Ich muss jedem von ihnen danken. Sie erleichtern uns allen das Web.

  • Ire Aderinokun (@ireaderinokun) schreibt in ihrem Blog bitsofco.de eine Menge leicht verständlicher und auf den Punkt gebrachter CSS-Informationen.
  • Ana Tudor (@anatudor) ist eine Entwicklerin, die lächerlich komplexe und schöne Animationen in CSS erstellt. Ihr Codepen ist einer der am häufigsten verwendeten und was sie mit den CSS-Engines macht, ist eine große Hilfe für Browserhersteller, um ihre Leistung zu testen
  • Jen Simmons (@jensimmons) ist ein CSS-Layout- und Designexperte, der für Mozilla arbeitet
  • Rachel Andrew (@rachelandrew) ist für mich die # 1 CSS Grid Expertin
  • Chris Coyier (@chriscoyier) ist der Gründer der erstaunlichen CSS-Ressource CSS Tricks und des interaktiven Entwicklungsspielplatzes Codepen
  • Sarah Drasner (@sarah_edo) ist eine Expertin für Animation und Design, die sich auf die Entwicklung wartungsfähiger Produkte konzentriert
  • Zoe M. Gillenwater (@zomigi) ist ein führender Entwickler, der CSS in der Produktion einsetzt
  • Brad Frost (@brad_frost) ist Autor von Atomic Design, einer skalierbaren Methode zur Verwendung und Wiederverwendung von CSS in großen Projekten
  • Rachel Nabors (@rachelnabors) ist eine Comiczeichnerin und Animationsexpertin, die über Webanimationen und die Vorzüge verschiedener Technologien schreibt
  • Una Kravets (@una) ist ein Entwickler, der sich auf CSS und seine neuen Funktionen spezialisiert hat. Sie ist auch eine Podcasterin und hat ihren Finger sehr am Puls von CSS und anderen visuellen Technologien
  • Lea Verou (@leaverou) ist Autorin des exzellenten Buches über CSS-Geheimnisse, Forscherin am MIT und geladene Expertin der CSS-Arbeitsgruppe des W3C. Sie recherchiert akribisch und liefert in kurzer Zeit unbarmherzig viele großartige Informationen.
  • Sara Soueidan (@sarasoueidan) ist eine Entwicklerin, die sich mit reaktionsschnellen Designs und pragmatischen Ansätzen für den Einsatz neuester Technologien auskennt.

Ich lasse mich täglich von diesen Leuten (unter anderem) inspirieren und hoffe, dass Sie die gleiche Erfahrung machen