Falsche Verwendung des CSS-Klassenattributs oder gültiges Designmuster?

Question

Wie Sie wahrscheinlich bereits wissen, ist es in JQuery einfach, alle Elemente im Dokument auszuwählen, die eine bestimmte CSS-Klasse haben, und dann mithilfe der Verkettung den ausgewählten Elementen gemeinsame Event-Handler zuzuweisen:

$(".toolWindow").click(toolWindow_click);
$(".toolWindow").keypress(toolWindow_keypress);

Wie üblich wird auch die Klasse "toolWindow" normalerweise in CSS definiert und mit einigen visuellen Stilen verbunden:

.toolWindow{
   color:blue;
   background-color:white;
}

Das Attribut class ist nun dafür verantwortlich, nicht nur das Aussehen (den visuellen Zustand) des Elements anzugeben, sondern auch das Verhalten. Infolgedessen verwende ich häufig diesen Ansatz und definiere CSS-Klassennamen eher als pseudo-objektorientierte Klassen denn als rein visuelle CSS-Klassen. Mit anderen Worten: Jede Klasse repräsentiert sowohl den Zustand (CSS-Stile) als auch das Verhalten (Ereignisse).

In einigen Fällen habe ich sogar Klassen ohne visuelles Styling erstellt und verwende sie einfach als bequeme Möglichkeit, den Elementen ein Verhalten zuzuweisen.

Das jQuery LiveQuery-Plugin (und die eingebaute Funktion live()) machen diesen Ansatz sogar noch effektiver, indem sie Ereignisse automatisch an dynamisch erstellte Elemente binden, die zu einer bestimmten Klasse gehören.

In letzter Zeit verwende ich in erster Linie Klassennamen, um ein gemeinsames Verhalten für verbundene DOM-Elemente zu definieren, und erst später, um einen visuellen Stil zu definieren.

Fragen: Ist dies ein schrecklicher Missbrauch des CSS-Attributs "class", und wenn ja, warum?

Andererseits ist es vielleicht ein vollkommen gültiger Ansatz, um die "Trennung von Belangen" weiter umzusetzen und die Wartbarkeit von HTML/DHTML-Seiten zu verbessern?

Answer 1

Das ist ein absolut vernünftiger Ansatz und entspricht genau dem, was der Klasse zugeschrieben wird. sollte verwendet werden.

Ich würde sagen, dass, wenn eine Klasse nur von jQuery und nicht von CSS verbraucht wird, es gut ist, eine klare Namenskonvention zu haben, die die Verwendung angibt - wenn nicht für Sie selbst, dann zumindest für alle anderen, die mit Ihrem Code arbeiten können, sehen eine Klasse, die nicht in CSS referenziert wird und dann löschen Sie es :)

Ich neige dazu, einen spezifischen Klassennamen zu haben, der den Zweck eines Objekts angibt, und weitere, oft recht allgemein klingende, Klassennamen, die den Zustand eines Objekts angeben.

class="toolTip" - die QuickInfo class="toolTip open" - der Tooltip im angezeigten Zustand

Auf diese Weise können Sie Benennungskonventionen für Verhaltensweisen leicht verallgemeinern (und potenziell JS-Code für sie zu).

Indem Sie CSS verwenden, um die Darstellung der verschiedenen Zustände zu definieren, ist Ihr JS-Code viel eleganter, als wenn Sie alles über JS verwalten:

$('div.toolTip').addClass('open');

statt

$('div.toolTip').css({display: 'block' ... etc etc });

ps. Ich glaube nicht, dass dies der richtige Ort ist, um die Frage Klasse vs. ID zu erörtern, das ist wirklich eine andere Debatte!

Answer 2

Das hängt davon ab, was Sie unter "Verhalten" verstehen. Wenn Ihr Verhalten zum Beispiel wirklich nur ein ausgefallener Styling-Effekt ist, könnte ich es als einen erweiterten Stil durchgehen lassen.

Andernfalls denke ich immer noch, es ist in Ordnung, aber ich würde wahrscheinlich eine separate (leere) CSS-Klasse definieren, um das Verhalten zu steuern, um die Trennung der Anliegen zu bewahren.

Answer 3

Ich habe das verwendet, um Tastendruckfilter für numerische Felder zu installieren. Die Klasse wäre "numerisch", "dezimal", "negativ dezimal" oder "Dezimalliste" (erlaubt Komma und Leerzeichen). Das war auch sehr einfach zu lesen.

Answer 4

Ich denke ständig darüber nach. Im Moment denke ich, mehrere Klassen ist immer noch der beste Ansatz und wie die Leute sagten, nicht falsch. Aber es macht für eine chaotische DOM wenn nichts anderes, wenn Sie hundert Elemente wie haben:

<div class="draggable sortable droppable list-item editable text">text</div>

Es gibt einige Dinge, wie Flags, die man mit der data()-Methode in jQuery zuweisen kann. Ich würde gerne sehen, wie sich data() in jQuery zu einem Werkzeug entwickelt, wie wir Klassen verwenden.

Answer 5

Als Konvention verwende ich gerne ein Präfix für meine Klassen, damit ich weiß, dass eine Klasse in der CSS-Datei mit Javascript-Code verbunden ist. Zum Beispiel mit einem "Js"-Präfix:

.JsButton { ... } .JsToggleElement { ... }

Eine andere Konvention wäre, normalerweise nur Kleinbuchstaben für CSS-Klassen und -IDs zu verwenden (beachten Sie, dass einige Browser zwischen Groß- und Kleinschreibung unterscheiden!) und CamelCasing für Javascript-gebundene Klassen zu verwenden.

Der Grund dafür ist, dass eine Klasse, die an ein Verhalten gebunden ist, oft bequem Styling-Regeln übernehmen kann.

Ich habe in Betracht gezogen, auch die Schaffung von Klassen rein für Javascript-Verhalten, und verwenden Sie eine seaprate Klasse für das Styling, aber das ist eine Menge Haare spalten für nichts. Stattdessen würde ich lieber nur klar definieren die Klassen in der Javascript-Code:

mySuperObject =
{
    CSS_TOGGLE: 'JsToggle',
    CSS_HIDE:   'JsHide',

    initialize:function()
    {
        var elems = SomeJsLib.getElementsByClassname(document, 'a', this.CSS_TOGGLE);
        ...