DRY zwischen Javascript und CSS aufrechterhalten

Question

Angenommen, Sie haben ein Menü, das sich mit einer Schaltfläche öffnen und schließen lässt. Mein Standard-Weg, um dies zu tun wäre, um die CSS für ein geschlossenes Menü zu schreiben, und schreiben Javascript, die angibt (oder animiert zu) ein offenes Menü Zustand.

In letzter Zeit habe ich mich mit Active.js beschäftigt, einem clientseitigen MVC-Framework. Es bietet für Ansichtsklassen mit Buildern für die Erstellung von DOM-Fragmenten, und diese Fragmente können Methoden, die Dinge wie Animation und DOM-Status behandeln gegeben werden.

Die Beschreibung des Ausgangszustands in CSS und die Beschreibung der alternativen Zustände in JavaScript fühlt sich irgendwie seltsam an. Ohne Animation wäre es vernünftig, alles in CSS zu tun und Javascript nur zum Hinzufügen oder Entfernen von DOM-Klassen zu verwenden.

Meine andere Idee ist es, alle Zustände (gefaltet, ausgeklappt, rot, grün) eines DOM-Objekts in JSON (anstatt CSS) zu beschreiben und meinem ActionView-Objekt Methoden für die Animation zwischen diesen Zuständen zu geben. Macht das jemand? Andere Ideen?

Answer 1

Soweit Animation geht, wäre es nicht eine Verletzung der DRY zu grundlegenden Styling in CSS und dann die Animation oder Styling können Sie nicht in reinen CSS in Javascript zu erreichen, weil Sie noch keine Wiederholung, wenn es richtig gemacht. Wenn Sie denken, es ist ein "reiner" Weg, um Dinge zu tun, können Sie versuchen, mehr von der Gestaltung in Javascript oder CSS zu halten, aber das sind nur die Sprachen, die Sie verwenden, und wenn Sie sie beide Ausdrücke des gleichen zugrunde liegenden DOM betrachten, ist es völlig angemessen, die ausdrucksstärkere oder kompatible Sprache zu verwenden, wo immer erforderlich.

In der Regel gehe ich mit CSS so weit, wie es geht, und verwende dann jQuery, um die Dinge zu tun, die CSS nicht bewältigen kann oder die nicht browserübergreifend sind, wie Animationen.