Puis-je utiliser des classes CSS non existantes?

J'ai une table où je montre / cache une colonne complète de jQuery via une classe CSS qui n'existe pas:

<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>

Avec ce DOM, je peux le faire en une seule ligne via jQuery: $('.target').css('display','none');

Cela fonctionne parfaitement, mais est-il valable d'utiliser des classes CSS qui ne sont pas définies? Dois-je créer une classe vide pour cela?

<style>.target{}</style>

Y a-t-il des effets secondaires ou existe-t-il une meilleure façon de le faire?

"Classe CSS" est un terme impropre; classest un attribut (ou une propriété, en termes de script) que vous attribuez aux éléments HTML. En d' autres termes, vous déclarez des classes en HTML, CSS pas, donc dans votre cas la classe « cible » fait dans exist d'information sur ces éléments spécifiques, et votre balisage est parfaitement valide car il est.

Cela ne signifie pas nécessairement que vous devez avoir une classe déclarée dans le HTML avant de pouvoir l'utiliser en CSS non plus. Voir le commentaire du ruakh. La validité d'un sélecteur dépend entièrement de la syntaxe du sélecteur et CSS possède son propre ensemble de règles pour gérer les erreurs d'analyse , dont aucune ne concerne le balisage. Essentiellement, cela signifie que HTML et CSS sont complètement indépendants l'un de l'autre en ce qui concerne la validité. ¹

Une fois que vous comprenez cela, il devient clair qu'il n'y a aucun effet secondaire de ne pas définir de .targetrègle dans votre feuille de style. ² Lorsque vous affectez des classes à vos éléments, vous pouvez référencer ces éléments par ces classes dans une feuille de style, un script ou les deux. Ni l'un ni l'autre ne dépend de l'autre. Au lieu de cela, ils font tous deux référence au balisage (ou, plus précisément, à sa représentation DOM). Ce principe s'applique même si vous utilisez JavaScript pour appliquer des styles, comme vous le faites dans votre one-liner jQuery.

Lorsque vous écrivez une règle CSS avec un sélecteur de classe, tout ce que vous dites est «Je veux appliquer des styles aux éléments qui appartiennent à cette classe». De même, lorsque vous écrivez un script pour récupérer des éléments par un certain nom de classe, vous dites «Je veux faire des choses avec des éléments qui appartiennent à cette classe». Si oui ou non il y a des éléments qui appartiennent à la classe en question est une question tout à fait distincte.

¹ _{C'est aussi pourquoi un sélecteur d'ID CSS fait correspondre tous les éléments avec l'ID donné, que l'ID apparaisse exactement une ou plusieurs fois (ce qui entraîne un document HTML non conforme).}

² _{La seule situation à ma connaissance où une règle CSS vide comme celle-ci est nécessaire est lorsque certains navigateurs refusent d'appliquer correctement certaines autres règles à la suite d'un bogue; la création d'une règle vide entraînera l'application de ces autres règles pour une raison quelconque. Voir cette réponse pour un exemple d'un tel bogue. Cependant, c'est du côté CSS et ne devrait donc avoir rien à voir avec le balisage.}

Il n'y a aucun effet néfaste à utiliser des classes qui n'ont pas de styles. En effet, cela fait partie de l'utilité de CSS, c'est qu'il est découplé du balisage et peut styliser ou non les éléments / classes / etc. comme requis.

Ne les considérez pas comme des "classes CSS". Considérez-les comme des "classes" que CSS utilise également si nécessaire.

Selon la spécification HTML5 :

Un attribut de classe doit avoir une valeur qui est un ensemble de jetons séparés par des espaces représentant les différentes classes auxquelles l'élément appartient. ... Il n'y a pas de restrictions supplémentaires sur les jetons que les auteurs peuvent utiliser dans l'attribut class, mais les auteurs sont encouragés à utiliser des valeurs qui décrivent la nature du contenu, plutôt que des valeurs qui décrivent la présentation souhaitée du contenu.

Aussi, dans la version 4 :

L'attribut class a plusieurs rôles en HTML:

• En tant que sélecteur de feuille de style (lorsqu'un auteur souhaite affecter des informations de style à un ensemble d'éléments).
• Pour le traitement général par les agents utilisateurs.

Votre cas d'utilisation relève du deuxième scénario, ce qui en fait un exemple légitime d'utilisation d'un attribut de classe.

Vous pouvez utiliser une classe qui n'a pas de styles, c'est du HTML entièrement valide.

Une classe référencée dans un fichier CSS n'est pas une définition d'une classe, elle est utilisée comme règle de sélection à des fins de style.

Lorsque vous utilisez un nom de classe en JavaScript, il ne regarde pas le CSS pour trouver cette classe. Il regarde directement dans le code HTML.

Tout ce qui est requis est que le nom de classe soit dans le HTML. Il n'a pas besoin d'être dans le CSS.

En fait, beaucoup de gens pensent que c'est en fait une bonne idée de garder des classes séparées à utiliser avec CSS et Javascript , car cela permet à vos concepteurs et codeurs de travailler indépendamment sans se gêner mutuellement en utilisant leurs classes respectives.

(Remarque, le paragraphe ci-dessus est évidemment plus applicable pour les projets plus importants, alors ne pensez pas que vous devez aller à cet extrême si vous travaillez seul; je l'ai mentionné pour faire valoir que les deux peuvent être entièrement séparés )

Vous pouvez utiliser des classes CSS sans l'utiliser, mais je suggère que si vous ajoutez des classes CSS uniquement pour le code JavaScript / jQuery, préfixez-le js-YourClassNameafin que les développeurs frontaux n'utilisent jamais ces classes pour styliser les éléments. Ils doivent comprendre que ces classes peuvent être supprimées à tout moment.

Au moment où vous ajoutez la classe dans votre code HTML, la classe sera définie, donc votre solution est parfaitement adaptée

Il n'est pas nécessaire de définir des classes CSS dans votre feuille de style. Il devrait fonctionner parfaitement. Cependant, l'ajouter ne nuira pas.

Une chose que personne ici n'a pleinement mentionnée est que JavaScript (aidé par jQuery dans ce cas) n'est pas en mesure de modifier directement la feuille de style en cascade d'un document. La css()méthode de jQuery ne fait que modifier l'ensemble des stylepropriétés des éléments correspondants . CSS et JavaScript sont complètement indépendants de cet aspect.

$('.target').css('display','none');ne change pas du tout votre .target { }déclaration CSS. Ce qui s'est passé ici à la place, c'est que tout élément avec un class"cible" ressemble maintenant à ceci:

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

Y a-t-il des effets secondaires causés par la non-définition d'une règle de style CSS? Pas du tout.

Y a-t-il une meilleure manière de faire cela? Côté performances, oui!

Comment améliorer les performances?

Plutôt que de modifier directement le stylede chaque élément, vous pouvez plutôt prédéfinir une nouvelle classe et l'ajouter à vos éléments correspondants en utilisantaddClass() (une autre méthode jQuery).

Sur la base de ce JSPerf préexistant qui se compare css()à addClass(), nous pouvons voir que addClass()c'est en fait beaucoup plus rapide:

Comment pouvons-nous mettre cela en œuvre nous-mêmes?

Tout d'abord, nous pouvons ajouter dans notre nouvelle déclaration CSS:

.hidden {
    display: none;
}

Votre code HTML resterait le même, cette classe prédéfinie est simplement en place pour une utilisation ultérieure.

Nous pouvons maintenant modifier le JavaScript à utiliser à la addClass()place:

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

Lors de l'exécution de ce code, plutôt que de modifier directement la stylepropriété de chacun de vos éléments "cible" correspondants, cette nouvelle classe aura désormais été ajoutée:

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

Avec la nouvelle classe "cachée", cet élément héritera du style déclaré dans votre CSS et votre élément ne sera plus affiché.

Comme cela est mentionné par tant d'autres, oui, l'utilisation de classes sans CSS assigné est parfaitement valide et plutôt que de les considérer comme des `` classes CSS '', vous devez simplement reconnaître la sémantique de la classe et de l'ID comme étant respectivement des groupes et des éléments individuels.

Je voulais intervenir car je sentais qu'un point important n'avait pas été soulevé étant donné l'exemple. Si jamais vous devez effectuer des manipulations visuelles sur une longueur variable d'éléments (dans ce cas, vous utilisez des lignes de tableau), il est toujours logique de reconnaître que le coût de le faire via Javascript peut potentiellement être très coûteux (par exemple, si vous avez milliers de lignes).

Dans cette situation, disons que nous savons que la colonne 2 a toujours le potentiel d'être cachée (c'est une fonction consciente de votre table), alors il est logique de concevoir un style CSS pour gérer ce cas d'utilisation.

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

Ensuite, plutôt que d'utiliser JS pour parcourir le DOM en trouvant N éléments, nous devons simplement basculer une classe sur une (notre table).

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

En attribuant un identifiant à la table, cela serait encore plus rapide et vous pourriez même vous référer à la colonne en utilisant le :nth-childsélecteur, ce qui réduirait davantage votre balisage, mais je ne peux pas commenter l'efficacité. Une autre raison pour cela est que je déteste le style en ligne, et je ferai de grands efforts pour l'éradiquer!

Cela n'aura aucun effet si vous appliquez une classe sur un élément HTML et que cette classe n'est pas définie en CSS. C'est une pratique courante et comme l'a dit Aamir afridi si vous utilisez des classes uniquement pour js, c'est une bonne pratique de les préfixer avec js-.

Il est non seulement valable pour les calsses, mais aussi pour l'attribut id des éléments html.

Il n'y a aucun problème à utiliser des classes pour simplement rechercher des éléments. J'avais l'habitude de donner à ces noms de classe le sys-préfixe (par exemple, je nommerai votre classe sys-target) pour les distinguer des classes utilisées pour le style. C'était une convention utilisée par certains développeurs de microsoft dans le passé. J'ai également remarqué une pratique croissantejs- préfixe à cette fin.

Si vous n'êtes pas à l'aise avec l'utilisation de classes à des fins autres que le style, je recommande d'utiliser le plug- in Role.js jQuery qui vous permet d'atteindre le même objectif à l'aide de l' roleattribut, vous pouvez donc écrire votre balisage <td role="target">et le rechercher à l'aide de $("@target"). La page du projet a une bonne description et des exemples. J'utilise ce plugin pour les grands projets parce que j'aime vraiment garder les classes à des fins de style uniquement.

Reportez-vous au moteur de validation jQuery . Même là-bas, nous utilisons également des classes inexistantes pour ajouter des règles de validation sur les attributs HTML . Il n'y a donc rien de mal à utiliser des classes qui ne sont pas réellement déclarées dans une feuille de style.