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

Die "Klasse" ist ein Teil der Dokumentendaten (und hoffentlich semantisch relevant), nicht der Stil oder das Design des Dokuments.

Deshalb ist es in Ordnung, sie für beides zu verwenden.

Answer 2

1. Das ist ein durchaus zulässiger Ansatz.
2. Klassenattribute definieren das Verhalten nicht - JS macht es, über CSS Selektoren (Danke, jQuery).
3. Klassenattribute definieren keine visuellen Stile - CSS Regeln es tun.

Answer 3

Ich denke, das ist vollkommen richtig.

Die einzige Regel, an die ich mich zu halten versuche, ist, dass Klassennamen einen semantischen Wert haben sollten. Sie müssen kein zugehöriges CSS oder JavaScript haben, wenn Sie das nicht wollen. Machen Sie einfach den Klassennamen beschreibend für den Inhalt.

Schlechte Klassennamen (nach meiner Regel):

<span class="brightRedBold">Wear Protective Gloves</span>
<a class = "openInNewWindow" ...>

Meiner Meinung nach sind diese genauso schlecht wie das Schreiben von Inline-Styles und Javascript

Gute Klassennamen:

<span class="urgentWarning">Wear Protective Gloves</span>
<a class = "offSiteLink" ...>

Sie können diesen Klassen beliebige Stile und Verhaltensweisen zuordnen und so ein viel konsistenteres und wartbareres Design entwickeln. Definieren Sie zum Beispiel einen gesprochenen Stil für "brightRed".

Answer 4

Ich glaube nicht, dass daran etwas auszusetzen ist. Um sicherzugehen, können Sie immer sicherstellen, dass die Klassen, die Sie für das Verhalten verwenden, von den Klassen, die Sie für die Darstellung verwenden, getrennt sind.

Die Stärke von jQuery liegt in der Verwendung der CSS-Selektorsyntax für die DOM-Manipulation. Diese Syntax war ursprünglich für CSS, für die Präsentation, gedacht. Die Verwendung zur Definition von Verhalten (unabhängig davon, ob man Klassen auswählt oder nicht) hat sich jedoch als eine wirklich leistungsstarke Technik herausgestellt. Wer könnte dem widersprechen?

Answer 5

Ich versuche, wo immer möglich, IDs zu verwenden und Klassen zu vermeiden. Das heißt nicht, dass es schlecht ist, sie zu verwenden, ganz im Gegenteil. Aber ich glaube, wenn man IDs verwendet, ist man in gewisser Weise gezwungen, ein sehr strukturiertes und sinnvolles semantisches Markup zu verwenden. Wenn Sie jedes Mal Klassen ausspucken, wenn ein Element auf eine bestimmte Weise aussehen soll, machen Sie es wahrscheinlich falsch.

Das ist ein ziemlich kontroverses Thema, also werfe ich das einfach mal in die Waagschale.