Kann ich nicht vorhandene CSS-Klassen verwenden?

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?

"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. ¹

Sobald Sie das verstanden haben, wird klar, dass es keine Nebenwirkung gibt, wenn Sie keine .targetRegel in Ihrem Stylesheet definieren. ² 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).}

² _{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.}

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.

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.

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.

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 )

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.

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

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

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:

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.

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!

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.

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.

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.