CSS-Klassen als Dekorateure verwenden - ein gutes Muster?

Ich habe eine Web-App mit einer ziemlich komplexen Benutzeroberfläche erstellt - viele kleine Elemente nebeneinander und in anderen Elementen, die unterschiedliche Verhaltensweisen erfordern (Ziehen, Klicken, aber kontextsensitiv).

Mein Code funktioniert normalerweise so:

Steuerelemente beginnen als HTML-Tags

<li>

dann füge ich dem Tag Klassen hinzu

<li class = 'static passive included'>

In einigen Klassen kann das CSS-Styling das Erscheinungsbild beeinflussen

.static {background: blue; float: left;}

während andere von jQuery bearbeitet werden, um Verhalten für die zugehörigen DOM-Ereignisse anzugeben

$("#container").delegate(".passive", function {onclick : //do-stuff})

und andere können beim Scannen des Dokuments von normalem Javascript erfasst werden, z. Sammeln Sie die Textwerte aller Knoten mit der Klasse 'eingeschlossen'. Bestimmte DOM-Elemente sind also GUI-Objekte, die Klassen implementieren, die durch eine Kombination aus CSS und jQuery definiert wurden.

Meine Frage ist, ist das eine gute Art zu arbeiten? Und das sind auch wirklich "Dekorateure" - sie fügen einem Objekt sicherlich dynamisch zusätzliche Verantwortlichkeiten hinzu ", aber ich bin mir über diesen Begriff nicht sicher. Verwenden Sie dieses Muster schließlich auf Ihren eigenen Websites?

Ich denke, was du tust, ist tot auf. Die Verwendung von Klassen im Gegensatz zum Erstellen von Attributnamen hat den Vorteil, dass Sie die Seite weiterhin validieren können. Kein moderner Browser wird sich über undefinierte CSS-Klassen aufregen, und die Verwendung mit jQuery et al. Ist trivial.

Klassen sind in Ordnung, aber ich würde auch HTML-Datenattribute berücksichtigen . Oftmals vermittelt ein Klassenname einfach nicht genügend Informationen, um das entsprechende Javascript-Hooking zu ermöglichen (ohne fest codierte Element-ID-Namen). HTML-Datenattribute bieten eine weitere Möglichkeit, Elemente zu klassifizieren, auszuwählen und Daten zu Hilfszwecken wie JavaScript-basierten Verbesserungen zuzuordnen.

Bei jQuery sind HTML-Datenattribute genauso einfach zu verwenden wie CSS-Klassen.

Hmmm ... ja und nein. Es ist in Ordnung, solche Dinge zu tun, aber Klassen sollten wirklich benannt werden, um zu zeigen, was an den Daten in ihnen gemeinsam ist. Wenn zwei Tags nichts gemeinsam haben, besteht die Möglichkeit, dass die Anforderungen der Klassen später abweichen.

Beispielanforderung:

• Alle Navigationselemente sind weiß auf blau, helvetica mit einem Rand von 1px
• Alle Kommentarbeschreibungen sind weiß auf blau, arial mit einem Rand von 4px und einer Polsterung von 2px

Ist es besser, beiden eine Klasse von Weißblau zu geben, wo

.whiteonblue {
  font-color: white;
  background-color: blue;
}

oder Code wiederholt zu haben

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

Ich argumentiere letzteres. Es gibt keine Verbindung zwischen Navigationselementen und Kommentaren, und daher ist es wahrscheinlich, dass sich das eine nicht ändert, wenn sich eines ändert. Möchten Sie wirklich im HTML-Code nach der richtigen Klasse suchen, die Klasse entfernen und eine neue (whiteonred) hinzufügen müssen, bevor Sie zu diesem Zeitpunkt zum CSS wechseln? Ich nicht.

Ebenso Javascript. Vielleicht möchten Sie dasselbe beim ersten Entwurf anklicken, aber die Wahrscheinlichkeit ist, dass wenn sich einer ändert, der andere dies nicht tut. Es ist leicht zu sagen

$(".navitems, .commentdesc")

Wenn Sie sich an diese Richtlinie halten, werden Sie wahrscheinlich feststellen, dass Ihre Frage ziemlich schnell verschwindet, aber wo dies nicht der Fall ist, ist das, was Sie tun, in Ordnung.