Ich habe Bedenken, CSS-Klassen zu verwenden, die in Stylesheets mit meinen jQuery-Selektoren definiert sind. Der Grund dafür ist, wenn eine CSS-Klasse in einem Stylesheet definiert ist. Es gibt viele Gründe für einen Entwickler / Designer, den Namen der Klasse zu ändern oder wie er in dem html verwendet wird, das von dem jQuery-Selektor, der auch den Klasse. Es gibt nichts Offensichtliches, das dem Entwickler / Designer mitteilt, dass er JavaScript-Funktionalität berücksichtigen muss, wenn er diese Änderung vornimmt.
Wäre es besser, nur zu vermeiden, jQuery-Selektoren mit legitimen CSS-Klassen zu verknüpfen, sondern CSS-Klassen zu verwenden, die nicht an Stile gebunden sind und ein Präfix wie 'j_' haben, das den Zweck offensichtlich macht ausschließlich als jQuery-Selektor? Dies würde die Kopplung auf Kosten eines zusätzlichen Klassennamens im Markup weniger zerbrechlich machen. Dies würde auch zu Validierungs-Engines führen, die undefinierte Klassen weniger nützlich finden, aber das Präfix würde hoffentlich klar machen, dass diese Klassen einen Zweck als jQuery-Selektoren erfüllen.
....
Ich verstehe, dass CSS-Klassen basierend auf ihrer Funktionalität benannt werden sollten. Ich glaube jedoch nicht, dass das Benennen der Klasse auf diese Weise das Problem löst. Entwickler / Designer werden den Namen immer noch ändern, auch wenn der neue Name immer noch dieselbe Funktionalität beschreibt, oder sie können ändern, wo sie verwendet wird. In diesen Fällen ist es nicht offensichtlich, dass diese Änderungen die JavaScript-Funktionalität beeinflussen.
Ich denke, dein Problem ist rein konzeptionell. Das class -Attribut in HTML definiert keine CSS-Klasse. Es definiert die semantische Klasse des Elements. Es ist einfach so, dass CSS diese Klassen verwendet, um Stile anzuwenden (ähnlich wie jQuery-Selektoren sie verwenden, um andere Funktionen anzuwenden). Nichts hindert Sie daran, Klassen zu haben, die nicht in einem Stylesheet definiert sind oder überhaupt keine Stilinformationen haben. Daher sollten alle Klassen als Teil des Codes betrachtet werden, nicht als Styling. Der Code diktiert die Klassen, das CSS pendelt einfach auf das semantische Markup, um Stile anzuwenden. Daher sollte das CSS niemals Klassennamen diktieren, und kein Designer sollte jemals die Klassennamen ändern. Mir ist klar, dass dies auf den ersten Blick wahrscheinlich sehr nach den anderen Antworten klingt, die (sehr richtig) Sie raten, "semantische Namen zu verwenden", aber hier gibt es einen subtilen konzeptionellen Unterschied: Die Klassen sind die Meister, die CSS-Stile sind die Sklaven .
Referenzen: diese Website macht meinen Standpunkt klar; w3schools erwähnt dies auch kurz.
Der css-Klassenname sollte die Funktion des Elements beschreiben, nicht den Stil, der darauf angewendet wird. Wenn Sie eine Seitenleiste haben, die nach links verschoben ist, rufen Sie die Seitenleiste der Klasse auf, nicht leftFloat. Auf diese Weise können Sie den Stil der Seitenleiste in die Sidebar-Klasse in CSS einfügen und alle jQuery-Funktionen anwenden, die Sie benötigen.
Bearbeitet, um einen der Kommentare zu klären: Sie sollten die Klassen oder IDs der Elemente nicht umbenennen müssen. Wenn Sie eine Seitenleiste haben, ändert sich diese möglicherweise in eine Symbolleiste oder eine obere Navigation. Ist es wichtig, dass es immer noch eine Sidebar genannt wird? Der Benutzer merkt es nie. Oder du könntest alles wirklich abstrakte Namen geben, wie Navigationsbereich und Hauptinhalt.
Ich habe letzte Woche eine Webapp mit jQuery für den internen Gebrauch gestartet, und ich habe den Namen nur einer ID geändert, weil ich sie mehr verallgemeinern musste. Abgesehen davon, jede Klasse und ID behalten genau den gleichen Namen.
Es ist gut, die Trennung von Bedenken zu respektieren. Damit dies jedoch funktioniert, sollten Elemente nach ihrer Rolle auf der Seite semantisch benannt werden.
Gut:
%Vor%Schlecht:
%Vor%usw. Beachten Sie, dass die Elemente basierend auf der Funktion benannt werden, die das Element auf der Seite ausführt. Styles wird geändert - Sie können darauf zählen. Aber die Rollen sollten nicht (abgesehen von einem Redesign der Website, was bedeutet, dass Sie sowieso neu kodieren werden). Eine Seitenleiste wird also immer eine Seitenleiste sein, unabhängig davon, ob sich die Schriftgröße ändert oder ob die Umrandung an irgendeiner Stelle entfernt wird.
Beim Schreiben Ihrer Skripte sollten Sie Elemente auf Klassennamen ausrichten, die nicht ändern. Dies ist nur möglich, wenn Sie Ihre Elemente semantisch benannt haben - und Ihre Mitentwickler sollten dasselbe tun.
Ich stimme für den schlanken Ansatz. Wenn Sie gute Klassennamen haben, die für CSS und jQuery sinnvoll sind, verwenden Sie sie. Wenn die Namen für jQuery keinen Sinn ergeben, fügen Sie neue hinzu oder benennen Sie die vorhandenen Klassen um.
Wenn Sie befürchten, dass Entwickler das Skript durch Umbenennen von Klassen unterbrechen, fügen Sie dem CSS einfach eine Notiz hinzu, die sie beim Ändern von Klassennamen nach jQuery-Referenzen durchsuchen müssen.
Ich stimme Ihnen zu: Es ist besser, die "visuellen" Klassen von den "funktionalen" Klassen zu trennen.
Es kann jedoch Fälle geben, in denen der Klassenname offensichtlich macht, dass eine Klasse einige funktionale Auswirkungen hat. Zum Beispiel kann eine .input-edited-Klasse von jQuery gesetzt und gleichzeitig mit CSS formatiert werden.
Versuchen Sie es auch mit verschiedenen Selektoren. Wenn sich das Markup nicht stark ändert, aber Ihre Klassennamen möglicherweise, versuchen Sie, Klassenselektoren so wenig wie möglich zu verwenden. Wenn sich Ihre Klassen nicht viel ändern, aber Ihr Markup, verwenden Sie mehr Klassen. Ihre jQuery-Selektoren sollten genauso semantisch sein wie alles, was Sie schreiben. Lesbarkeit zählt.
Ich stimme den Jungs zu, dass CSS-Klassen semantisch sein sollten und keine visuelle Erscheinung darstellen sollten, aber ich denke immer noch, dass Ihre Frage bezüglich der "wahren" Trennung zwischen Layout und Verhalten großartig ist.
Ich denke, es wäre am besten, Klassen, die nur von einem Skript verwendet werden, in ein separates Stylesheet einzufügen. Schließen Sie das über JS ein (da es nicht benötigt wird, wenn JS nicht verfügbar ist). Beispiel wäre ".hover" oder ".current", natürlich nur dann, wenn das durch Scripting gemacht wird, zum Beispiel Effekte auf Blocklevel-Elemente. Bei Inline-Elementen würden Sie wahrscheinlich nur die CSS-Pseudoklasse verwenden.
Als HTML / CSS-Entwickler mag es manchmal vorkommen, dass Leute sagen: "Oh, da gibt es schon einen CSS-Kurs, da kann ich einfach reinhören", aber das ist völlig in Ordnung. Schließlich ist das Klassenattribut nicht exklusiv für CSS. Es ist ein HTML-Attribut. In Bezug auf die Angst vor dem Löschen von CSS-Regeln, die immer noch in JS verwendet werden, sei ehrlich: Mit CSS auf großen Websites können Sie nie ganz sicher sein, ob es verwendet wird, egal ob in JS oder HTML.
Ich wollte dies als Kommentar zu Marius 'exzellenter Antwort posten, aber es fing schon lange an der Zahn und ich wollten ein Beispiel hinzufügen.
Betrachte sie nicht als "CSS-Klassen". Sie sind nicht. Klassen sind Teil der HTML-Spezifikation und sind in keiner Weise mehr miteinander verbunden mit CSS als mit JavaScript.
Klassen existieren, um Informationen zu HTML-Elementen hinzuzufügen. Ist es eine Nachricht? Ist es ein Widget? Ist es deaktiviert? HTML hat keine Möglichkeit, diese Eigenschaften mit Klassen zu speichern. Einige Klassen verfügen über Stilinformationen (Nachrichtentitel sollten ihre Titel, Veröffentlichungsdaten und Bylines schön formatiert haben), einige Funktionen sind ihnen zugeordnet (Widgets müssen initialisiert werden) und andere haben beides (Elemente werden programmgesteuert deaktiviert und sollte versteckt oder "verblasst" sein.
Es gibt absolut keinen Grund , nicht dieselben Klassen in CSS und JavaScript zu verwenden - solange beide für die Informationen geeignet sind, die die Klasse repräsentiert.
Ich denke, es ist absolut in Ordnung, dieselben Klassen für CSS und Skripte zu verwenden.
Stellen Sie sich vor
%Vor%ist es nicht hässlich genug? Ein Div ist etwas besser. Eine Adresse ist etwas besser. Eine Klasse ist etwas besser.
Problem "sie ändern Klassen" wird durch Kommentare, Tests und sorgfältige Bearbeitung gelöst.