#21: Einfach Klassen ändern!

Wenn Sie aus dieser Serie nur eine wichtige Lektion über Frontend-Architektur lernen, dann lernen Sie diese. Ändern Sie einfach Klassen. In diesem Screencast tauchen wir tief in eine große Kaninchenhöhle von JavaScript ein, nur um dann anzuhalten, uns zu fangen und stattdessen CSS zu verwenden. Wenn Sie etwas Visuelles ändern, ist das die Domäne von CSS. Es ist nicht nur gut darin, sondern ist typischerweise performanter und erhält eine gesunde „Trennung der Anliegen“ aufrecht, die zu einer langfristig gesunden Website führt.

Nachdem wir wieder zur Vernunft gekommen sind, haben wir einfach 1) den Button-Text und 2) ein data-state Attribut am Container getauscht.

$(".bigger").on("click", function() {
  var el = $(this);
  
  var module = el.parent();
  
  // Swap expanded state
  module.attr("data-state") == "expanded" 
    ? module.attr("data-state", "")
    : module.attr("data-state", "expanded");
  
  // Swap button text.
  el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
  
});

Hier sind wir gelandet

Siehe den Pen quFCo von Chris Coyier (@chriscoyier) auf CodePen

Ja, dieses Video (und die Aussage) lautet „einfach Klassen ändern!“, und wir ändern hier ein data-* Attribut, aber ich betrachte das als dasselbe. Manchmal verwende ich data-* Attribute einfach, weil ich sie mag. Ich betrachte sie als Namensräume für Klassen oder als Klassen mit Werten. Arguably nützlicher in CSS als Klassen und sie haben genau den gleichen Spezifitätswert.

Sieht diese ? / : Syntax komisch aus? Wenn ja, ist das ein sogenannter Ternary- (oder „bedingter“) Operator.

Die erste Zeile ist ein Test, die nächste Zeile (oder der Teil nach dem ?) ist das, was passiert, wenn dieser Test wahr ist, die letzte Zeile (oder der Teil nach dem :) ist das, was passiert, wenn dieser Test falsch ist. Vielleicht hilft das.

// The boolean (true/false) test
module.attr("data-state") == "expanded" 
  // Do this if the test is true
  ? module.attr("data-state", "")
  // Do this is the test if false
  : module.attr("data-state", "expanded");

Vermeiden Sie sie nicht nur, weil sie komisch aussehen. Sie können effizienter sein (und letztendlich genauso gut lesbar, solange Sie es nicht übertreiben) als if/else-Logik.

Doug Neiner hat einen guten Artikel über die Idee des „einfachen Klassenänderungsprinzips“. Klassen haben so viel Macht in CSS. Sie können Dinge ausblenden/anzeigen, Dinge bewegen, das Aussehen von Dingen ändern, Animationen auslösen… die Möglichkeiten sind endlos. Und je höher Sie im „Baum“ (DOM) die Klasse anwenden, desto mehr Kaskadenmacht haben Sie. Eine Klassenänderung am Body bedeutet, dass Sie alles auf der gesamten Seite mit einer einzigen Klasse steuern können. Und das alles mit einer sehr kleinen Menge JavaScript.

Sobald Sie sich darauf einlassen, werden Sie ein glücklicherer Entwickler sein.