molily: Stilkritik

Beitrag lesen

Die Grenzen der Intervalle, die verschieden dargestellt werden, gehören vielleicht auch eher ins Stylesheet.

Trennung von Verhalten und Präsentation macht man nicht zum Selbstzweck, es soll immer ein konkret sichtbarer Flexibilitäts- und Wartbarkeitsgewinn herauskommen.

Im Prinzip ist das, was hier getan wird, eine Aufgabe des Stylesheets. Allerdings bietet CSS bis dato keine Logik, die so ausgereift wie die einer Programmiersprache ist. Wenn ich eine Formatierung anhand einer Regel vornehme, die ich nicht direkt mit CSS-Selektoren ausdrücken kann, dann ergibt es praktisch nicht zwangsläufig Sinn, Regel und Formatierung über das JavaScript und das Stylesheet zu verteilen. Das macht es nicht unbedingt wartbarer, sondern erst einmal unübersichtlicher.

Wenn sich diese später ändern sollen (bspw. nicht mehr [0, 1[, [1, 4[, [4, 10[, [10, 15[ und [15, ∞[, sondern [0, 5[,[5, 10[, [10, ∞[), möchte man ja nicht Script UND Stylesheet anpassen müssen.

Eben. Deshalb ist es Quatsch, mit JavaScript mittels unzähliger Klassen ins Blaue zu feuern, um dann im Stylesheet mit obskuren, ellenlangen Regeln darauf zu reagieren.

Im Stylesheet:

.diff0   { color: #f1630c; font-size: 150% }

.diff1,
.diff2,
.diff3   { color: #d96117; font-size: 130% }

.diff4,
.diff5,
.diff6,
.diff7,
.diff8,
.diff9   { color: #fa670c; font-size: 120% }

.diff10,
.diff11,
.diff12,
.diff13,
.diff14  { color: #eb6513; font-size: 110% }

  
Das halte ich nicht für besser wartbar bzw. einfach ausbaubar. Außerdem besteht hier nicht die Möglichkeit, die Intervalle als das zu notieren, was sie sind. Die Aneinanderreihung von Klassen drückt das eher implizit aus. Im JavaScript hingegen könnte ich die Intervalle deklarativ notieren sowie diesen direkt Formatierungen oder indirekt Klassen zuordnen. Für mich ist es wichtig, eine Logik konzis, verständlich, menschen- und maschinenlesbar auszudrücken. Aus obigem Code wird man nicht schlau, er ist wenig sprechend und sehr umständlich. Unendlich viele Klassen zu erzeugen, mag in dem Beispiel hinhauen, ist aber redundant und skaliert nicht.  
  
Eine allgemeine Lösung dieses Problems liegt m.E. nicht in einer reinen JavaScript-Lösung oder einer ineffektiven Zusammenarbeit zwischen verallgemeinerter JS-Logik und redundanten CSS-Regeln. Es ist vielmehr die Frage, wie man die beides zentral und deklarativ notiert. Dazu ist weder JavaScript noch CSS genuin geeignet. Wenn man so etwas wirklich ausbaubar und wartbar machen will, wäre ein drittes Format sinnvoll, aus dem dann die passende JavaScript-Intervall-Deklaration sowie die nötigen CSS-Klassen automatisch generiert werden - die können dann »diffrange\_0\_1« usw. lauten.  
  
Solange es sich bloß um vier ganzzahlige Intervalle von 0 bis 15 handelt, kann man eine Lösung m.M.n. problemlos hartkodieren. Dann würde ich deine Variante aus dem vorigen Posting wählen. Alles andere wäre bei diesem Umfang schon Premature Optimization.  
  
Mathias