Kann ich nicht vorhandene CSS-Klassen verwenden?

260

Ich habe eine Tabelle, in der ich eine vollständige Spalte von jQuery über eine nicht vorhandene CSS-Klasse ein- / ausblende:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

Mit diesem DOM kann ich dies in einer Zeile über jQuery tun: $('.target').css('display','none');

Dies funktioniert perfekt, aber ist es gültig, CSS-Klassen zu verwenden, die nicht definiert sind? Soll ich eine leere Klasse dafür erstellen?

<style>.target{}</style>

Gibt es irgendwelche Nebenwirkungen oder gibt es einen besseren Weg, dies zu tun?

totymedli
quelle
9
Ich sehe nichts Falsches daran, obwohl ich es, wenn überhaupt möglich, zu einem Teil des Stylesheets gemacht hätte, anstatt es zu verwenden .css. Stile, die mit .css festgelegt wurden, sind sehr schwer zu überschreiben, ohne andere Probleme zu verursachen, daher vermeide ich sie.
Kevin B
8
Als Randnotiz, die Sie möglicherweise verwenden möchten, ist sie .toggle()in Ihrem Code etwas kürzer.
Math Chiller
4
Wenn Sie in Visual Studio + ReSharper eine Klasse verwenden, die nicht definiert ist, erhalten Sie eine Warnung. Dies ist hilfreich, wenn ich nur einen Tippfehler habe, aber in solchen Situationen ärgerlich ist. In diesem Fall haben Sie die Wahl, entweder den leeren Stil hinzuzufügen oder die Warnung zu deaktivieren (oder sie einfach zu ignorieren) - ich persönlich füge nur den leeren Stil hinzu. Ich weiß nicht, ob sich andere IDEs ähnlich verhalten.
Joe Enos
8
Es ist nicht nur möglich, sondern wird von einigen ausdrücklich empfohlen. Da Sie targetfür Javascript-Zwecke verwendet werden, verwenden viele Leute das Präfix js-für solche Klassen, d js-target. H. Übrigens: Ziel ist eine Art schlechter Name;) Weitere Informationen finden
k0pernikus
1
stackoverflow.com/questions/2832117/… ist mehr oder weniger ein Duplikat davon, ohne das Missverständnis.
naught101

Antworten:

491

"CSS-Klasse" ist eine Fehlbezeichnung; classist ein Attribut (oder eine Eigenschaft in Bezug auf die Skripterstellung), das Sie HTML-Elementen zuweisen. Mit anderen Worten, erklären Sie Klassen in HTML, CSS nicht, so in Ihrem Fall der „Ziel“ Klasse hat in der Tat gibt es auf diesen spezifischen Elementen und Markup ist vollkommen gültig , wie es ist.

Dies bedeutet nicht unbedingt, dass Sie eine Klasse im HTML deklarieren müssen, bevor Sie sie auch in CSS verwenden können. Siehe Ruakhs Kommentar. Ob ein Selektor gültig ist oder nicht, hängt vollständig von der Selektorsyntax ab. CSS verfügt über eigene Regeln für die Behandlung von Analysefehlern , von denen keines das Markup betrifft. Dies bedeutet im Wesentlichen, dass HTML und CSS in Bezug auf die Gültigkeit völlig unabhängig voneinander sind. 1

Sobald Sie das verstanden haben, wird klar, dass es keine Nebenwirkung gibt, wenn Sie keine .targetRegel in Ihrem Stylesheet definieren. 2 Wenn Sie Ihren Elementen Klassen zuweisen, können Sie diese Elemente durch diese Klassen entweder in einem Stylesheet oder einem Skript oder in beiden referenzieren. Keiner hat eine Abhängigkeit vom anderen. Stattdessen beziehen sich beide auf das Markup (oder genauer auf seine DOM-Darstellung). Dieses Prinzip gilt auch dann, wenn Sie JavaScript zum Anwenden von Stilen verwenden, wie Sie es in Ihrem jQuery-Einzeiler tun.

Wenn Sie eine CSS-Regel mit einer Klassenauswahl schreiben, sagen Sie nur: "Ich möchte Stile auf Elemente anwenden, die zu dieser Klasse gehören." Wenn Sie ein Skript schreiben, um Elemente mit einem bestimmten Klassennamen abzurufen, sagen Sie in ähnlicher Weise: "Ich möchte Dinge mit Elementen tun, die zu dieser Klasse gehören." Unabhängig davon , ob es sind Elemente , die gehören in die Klasse in Frage insgesamt ein anderes Thema ist.


1 Aus diesem Grund ordnet ein CSS-ID-Selektor alle Elemente der angegebenen ID zu, unabhängig davon, ob die ID genau einmal oder mehrmals angezeigt wird (was zu einem nicht konformen HTML-Dokument führt).

2 Die einzige mir bekannte Situation, in der eine solche leere CSS-Regel erforderlich ist, besteht darin, dass einige Browser aufgrund eines Fehlers die ordnungsgemäße Anwendung bestimmter anderer Regeln ablehnen. Wenn Sie eine leere Regel erstellen, werden diese anderen Regeln aus irgendeinem Grund angewendet. In dieser Antwort finden Sie ein Beispiel für einen solchen Fehler. Dies ist jedoch auf der CSS-Seite und sollte daher nichts mit dem Markup zu tun haben.

BoltClock
quelle
5
Es hat ewig gedauert, bis mir klar wurde, dass Klassen nichts mit CSS zu tun haben. Aber ungefähr zur gleichen Zeit wurde es allen anderen klar und Mikroformate kamen mit.
Konrad Rudolph
13
+1, obwohl diese Antwort fälschlicherweise implizieren könnte, dass CSS nur auf Klassen verweisen kann, die tatsächlich im HTML vorkommen. Es ist tatsächlich durchaus üblich, dass auf einer Website auf allen Seiten standortweites CSS verwendet wird, obwohl einige der Klassen, auf die sie verweist, nicht auf jeder einzelnen Seite angezeigt werden. (Zum Beispiel könnte die Site ein benutzerdefiniertes Styling für externe Links haben a.extlinkoder so weiter, selbst wenn einige Seiten keine externen Links enthalten.)
Ruakh
1
@ruakh: Ausgezeichneter Punkt, danke. Ich konnte keinen Weg finden, es in meine ursprüngliche, kurze Antwort zu integrieren, ohne vom Thema abzuweichen, aber ich sehe, wie die Verwendung des Begriffs Abhängigkeit diesen Eindruck erweckt haben könnte, also habe ich ihn ein wenig geändert. Trotzdem habe ich eine Fußnote hinzugefügt, die auf Ihren Kommentar verweist und weiter ausgeführt wird.
BoltClock
66

Es gibt keine negativen Auswirkungen bei der Verwendung von Klassen ohne Stile. In der Tat ist dies Teil des Nutzens von CSS, dass es vom Markup entkoppelt ist und Elemente / Klassen / etc. Stilisieren kann oder nicht. wie benötigt.

Betrachten Sie sie nicht als "CSS-Klassen". Stellen Sie sich diese als "Klassen" vor, die CSS auch bei Bedarf verwendet.

David
quelle
11
+1 für "Betrachten Sie sie nicht als 'CSS-Klassen'.
Stellen
48

Gemäß HTML5-Spezifikation :

Ein Klassenattribut muss einen Wert haben, der aus einer Reihe von durch Leerzeichen getrennten Token besteht, die die verschiedenen Klassen darstellen, zu denen das Element gehört. ... Es gibt keine zusätzlichen Einschränkungen für die Token, die Autoren im Klassenattribut verwenden können. Autoren werden jedoch aufgefordert, Werte zu verwenden, die die Art des Inhalts beschreiben, anstatt Werte, die die gewünschte Darstellung des Inhalts beschreiben.

Auch in der Version 4 :

Das Klassenattribut hat in HTML mehrere Rollen:

  • Als Stylesheet-Auswahl (wenn ein Autor einer Reihe von Elementen Stilinformationen zuweisen möchte).
  • Für die allgemeine Verarbeitung durch Benutzeragenten.

Ihr Anwendungsfall fällt unter das zweite Szenario, was es zu einem legitimen Beispiel für die Verwendung eines Klassenattributs macht.

Vitalii Fedorenko
quelle
13
+1 für die Angabe der relevanten Spezifikationen. Ich habe viel vergessen, das zu tun.
BoltClock
40

Sie können eine Klasse verwenden, die keine Stile hat. Dies ist vollständig gültiges HTML.

Eine Klasse, auf die in einer CSS-Datei verwiesen wird, ist keine Definition einer Klasse, sondern wird als Auswahlregel für Stilzwecke verwendet.

Curt
quelle
25

Wenn Sie einen Klassennamen in JavaScript verwenden, wird das CSS nicht durchsucht , um diese Klasse zu finden. Es sieht direkt im HTML-Code aus.

Erforderlich ist lediglich, dass sich der Klassenname im HTML befindet. Es muss nicht im CSS sein.

Tatsächlich halten viele Leute es für eine gute Idee, getrennte Klassen mit CSS und Javascript zu verwenden , da Ihre Designer und Programmierer unabhängig voneinander arbeiten können, ohne sich gegenseitig durch die Verwendung der Klassen des anderen in die Quere zu kommen.

(Beachten Sie, dass der obige Absatz offensichtlich besser für größere Projekte geeignet ist. Sie müssen also nicht zu diesem Extrem gehen, wenn Sie alleine arbeiten. Ich habe ihn erwähnt, um darauf hinzuweisen, dass die beiden völlig getrennt sein können )

Spudley
quelle
13

Sie können CSS- Klassen verwenden, ohne sie zu verwenden. Ich schlage jedoch vor, dass Sie beim Hinzufügen von CSS-Klassen nur für den JavaScript / jQuery-Code ein Präfix voranstellen, js-YourClassNamedamit die Front-End-Entwickler diese Klassen niemals zum Stylen der Elemente verwenden. Sie sollten verstehen, dass diese Klassen jederzeit entfernt werden können.

Aamir Afridi
quelle
10

Sobald Sie die Klasse in Ihr HTML einfügen, wird die Klasse definiert, sodass Ihre Lösung völlig in Ordnung ist

koningdavid
quelle
7
Die Verwendung der Klasse in HTML definiert sie nicht. Ich würde eher sagen, die Definition ist irrelevant: Es gibt keine Strafe für die Verwendung undefinierter Klassen.
JAL
10

Es ist nicht erforderlich, CSS- Klassen in Ihrem Stylesheet zu definieren . Es sollte gut funktionieren. Das Hinzufügen schadet jedoch nicht.

Rameez
quelle
Ich sage nicht, diese Stile hinzuzufügen, es liegt an ihm, wenn er will, wenn er vorhat, diese Stile zu unterstützen, warum dann nicht? Trotzdem danke für unnötige Abstimmungen :)
Rameez
Sie sagten "es ... wird nicht schaden", aber es wird schließlich.
Pavlo
Ja, es wird nicht schaden. Wenn er Sinne hat, um diese leeren Stile hinzuzufügen, hat er offensichtlich Sinne, um sie zu verwalten. Offensichtlich werde ich nicht hinzufügen. Ich rate auch nicht hinzuzufügen.
Rameez
8

Eine Sache, die hier niemand vollständig erwähnt hat, ist, dass JavaScript (in diesem Fall unterstützt von jQuery) das kaskadierende Stylesheet eines Dokuments nicht direkt ändern kann. Die css()Methode von jQuery ändert lediglich die styleEigenschaft der übereinstimmenden Elemente . CSS und JavaScript sind in diesem Aspekt völlig unabhängig.

$('.target').css('display','none');ändert Ihre .target { }CSS-Deklaration überhaupt nicht. Was hier stattdessen passiert ist, ist, dass jedes Element mit einem class"Ziel" jetzt ungefähr so ​​aussieht:

<element class="target" style="display:none;"></element>

Gibt es Nebenwirkungen, die dadurch verursacht werden, dass eine CSS-Stilregel nicht vordefiniert wurde? Überhaupt keine.

Gibt es einen besseren Weg, dies zu tun? In Bezug auf die Leistung gibt es ja!

Wie kann die Leistung verbessert werden?

Anstatt die styleeinzelnen Elemente direkt zu ändern , können Sie stattdessen eine neue Klasse vordefinieren und diese mithilfe eineraddClass() anderen jQuery-Methode zu Ihren übereinstimmenden Elementen hinzufügen .

Basierend auf dieser vorbestehenden JSPerf , die vergleicht css()mit addClass(), können wir sehen , dass addClass()tatsächlich viel schneller ist:

css () vs addClass ()

Wie können wir das selbst umsetzen?

Zunächst können wir in unserer neuen CSS-Deklaration hinzufügen:

.hidden {
    display: none;
}

Ihr HTML-Code bleibt unverändert. Diese vordefinierte Klasse ist einfach für die spätere Verwendung vorhanden.

Wir können jetzt das JavaScript ändern, um addClass()stattdessen zu verwenden :

$('.target').addClass('hidden');

Wenn Sie diesen Code ausführen, anstatt die styleEigenschaft jedes Ihrer übereinstimmenden "Ziel" -Elemente direkt zu ändern , wurde diese neue Klasse jetzt hinzugefügt:

<element class="target hidden"></element>

Mit der neuen "versteckten" Klasse erbt dieses Element das in Ihrem CSS deklarierte Styling und Ihr Element wird so eingestellt, dass es nicht mehr angezeigt wird.

James Donnelly
quelle
Guter Rat. Es gibt selten einen guten Grund, .css()IMO-Klassen zu verwenden, anstatt sie umzuschalten.
BoltClock
6

Wie von so vielen anderen erwähnt, ist die Verwendung von Klassen ohne zugewiesenes CSS absolut gültig. Anstatt sie als "CSS-Klassen" zu betrachten, sollten Sie einfach die Semantik von Klasse und ID als Gruppen bzw. einzelne Elemente erkennen.

Ich wollte einspringen, da ich der Meinung war, dass ein wichtiger Punkt angesichts des Beispiels nicht angesprochen wurde. Wenn Sie jemals visuelle Manipulationen an einer variablen Länge von Elementen vornehmen müssen (in diesem Fall verwenden Sie Tabellenzeilen), ist es immer sinnvoll zu erkennen, dass die Kosten dafür über Javascript möglicherweise sehr hoch sein können (z. B. wenn Sie dies getan haben) Tausende von Zeilen).

Nehmen wir in dieser Situation an, wir wissen, dass Spalte 2 immer das Potenzial hat, ausgeblendet zu werden (dies ist eine bewusste Funktion Ihrer Tabelle). Dann ist es sinnvoll, einen CSS-Stil zu entwerfen, der diesen Anwendungsfall behandelt.

table.target-hidden .target { display: none; }

Anstatt JS zum Durchlaufen des DOM zu verwenden und N Elemente zu finden, müssen wir einfach eine Klasse auf eine (unsere Tabelle) umschalten.

$("table").addClass("target-hidden")

Wenn Sie der Tabelle eine ID zuweisen, geht dies noch schneller und Sie können sogar einfach auf die Spalte verweisen, indem Sie den :nth-childSelektor verwenden, der Ihr Markup weiter reduziert, aber ich kann die Effizienz nicht kommentieren. Ein weiterer Grund dafür ist, dass ich Inline-Styling hasse und große Anstrengungen unternehmen werde, um es auszurotten!

Ian Clark
quelle
1
+1 für "Gruppen und einzelne Elemente" und für die effiziente Nutzung der Dokumentstruktur
Deltab
5

Es hat keine Auswirkung, wenn Sie eine Klasse auf ein HTML-Element anwenden und diese Klasse nicht in CSS definiert ist. Es ist eine gängige Praxis und wie Aamir afridi sagte, wenn Sie Klassen nur für js Zweck verwenden, ist es eine gute Praxis, ihnen js- voranzustellen.

Es gilt nicht nur für Calsses, sondern auch für das ID-Attribut von HTML-Elementen.

Altaf Hussain
quelle
4

Es ist überhaupt kein Problem, Klassen nur zum Abfragen von Elementen zu verwenden. Ich habe solchen Klassennamen das sys-Präfix gegeben (zum Beispiel werde ich Ihre Klasse benennen sys-target), um sie von Klassen zu unterscheiden, die für das Styling verwendet werden. Dies war eine Konvention, die in der Vergangenheit von einigen Microsoft-Entwicklern verwendet wurde. Ich bemerkte auch eine wachsende Praxis, das js-Präfix für diesen Zweck zu verwenden.

Wenn Sie mit der Verwendung von Klassen für andere Zwecke als das Styling nicht vertraut sind , empfehle ich die Verwendung des Role.js- jQuery-Plugins, mit dem Sie denselben Zweck mithilfe des roleAttributs erreichen können. Sie können also Ihr Markup als schreiben <td role="target">und es mit abfragen $("@target"). Die Projektseite enthält eine gute Beschreibung und Beispiele. Ich benutze dieses Plugin für große Projekte, weil ich Klassen nur für Stylingzwecke mag.

Ashraf Sabry
quelle
3

Weitere Informationen finden Sie in der jQuery- Validierungs-Engine. Auch dort verwenden wir nicht vorhandene Klassen, um Validierungsregeln für die HTML- Attribute hinzuzufügen . Es ist also nichts Falsches daran, Klassen zu verwenden, die nicht in einem Stylesheet deklariert sind.

Dhruvin
quelle