Puis-je utiliser des classes CSS non existantes?
J'ai une table où je montre/cache une colonne complète par 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 valide d'utiliser des classes CSS non définies? Devrais-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?
"CSS class" est un abus de langage; class est un attribut (ou une propriété, en termes de script) que vous affectez aux éléments HTML. En d’autres termes, vous déclarez des classes en HTML, et non en CSS, donc dans votre cas, la classe "cible" existe sur ces éléments spécifiques, et votre balisage est parfaitement valide tel quel.
Cela ne signifie pas nécessairement que vous devez avoir une classe déclarée dans le code HTML avant de pouvoir l'utiliser en CSS non plus. Voir le commentaire de ruakh. Si un sélecteur est valide ou non dépend entièrement de la syntaxe du sélecteur , et CSS possède son propre ensemble de règles de gestion des erreurs d'analyse , dont aucune ne concerne le balisage. Cela signifie essentiellement que HTML et CSS sont complètement indépendants l'un de l'autre en ce qui concerne la validité.1
Une fois que vous comprenez cela, il devient clair qu’il n’ya aucun effet secondaire à ne pas définir un .target règle dans votre feuille de style.2 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 a une dépendance de l'autre. Au lieu de cela, ils se réfèrent tous les deux 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 appartenant à cette classe". De même, lorsque vous écrivez un script pour récupérer des éléments sous un certain nom de classe, vous dites "je veux faire des choses avec des éléments appartenant à cette classe". Qu'il y ait ou non des éléments appartenant à la classe en question est une question distincte.
1C’est aussi la raison pour laquelle n sélecteur d’ID CSS correspond à tous les éléments avec l’ID donné quel que soit si l’ID apparaît exactement une fois, ou plusieurs fois (résultant en un document HTML non conforme).
2La seule situation que je connaisse où une règle CSS vide de ce type est nécessaire est que 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, ceci est du côté CSS et ne devrait donc rien avoir à faire avec le balisage.
Il n'y a pas d'effets néfastes à utiliser des classes qui n'ont pas de styles. En effet, l’utilité du CSS réside dans le fait qu’il est découplé du balisage et qu’il peut styler 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 s'il en a besoin.
Selon 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 de classe, mais les auteurs sont encouragés à utiliser des valeurs décrivant la nature du contenu plutôt que des valeurs décrivant la présentation souhaitée du contenu.
En outre, dans le 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 un traitement général par des 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 de classe, elle est utilisée comme règle de sélecteur à 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 la classe soit dans le code HTML. Il n'est pas nécessaire qu'il soit dans le CSS.
En fait, beaucoup de gens pensent que c'est en fait ne bonne idée de garder des classes séparées avec CSS et Javascript , car cela permet à vos concepteurs et à vos codeurs de travailler de manière indépendante sans se gêner mutuellement en utilisant leurs classes respectives.
(remarque, le paragraphe ci-dessus est évidemment plus applicable pour les grands projets, alors ne vous sentez pas obligé d'aller à l'extrême si vous travaillez seul; je l'ai mentionné pour préciser que les deux peuvent être entièrement séparés )
Vous pouvez utiliser les 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-YourClassName _ afin que les développeurs front-end n'utilisent jamais ces classes pour styliser les éléments. Ils doivent comprendre que ces classes peuvent être supprimées à tout moment.
Dès que vous ajouterez la classe à votre code HTML, la classe sera définie, votre solution sera donc parfaitement adaptée.
Il n'est pas nécessaire de définir CSS dans votre feuille de style. Il devrait fonctionner parfaitement. Cependant, l'ajouter ne fera pas de mal.
Une chose que personne n’a vraiment mentionnée ici est que JavaScript (avec jQuery dans ce cas) ne peut pas modifier directement la feuille de style en cascade d’un document. La méthode css() de jQuery ne fait que modifier l'ensemble de propriétés correspondant à la propriété style. CSS et JavaScript sont totalement indépendants dans cet aspect.
$('.target').css('display','none'); ne change pas votre déclaration CSS .target { }. Au lieu de cela, ce qui est arrivé ici est que tout élément avec un class de "cible" ressemble maintenant à ceci:
<element class="target" style="display:none;"></element>
Existe-t-il des effets indésirables dus au fait de ne pas prédéfinir une règle de style CSS? Pas du tout.
Y a-t-il une meilleure manière de faire cela? Côté performance, oui il y en a!
Comment la performance peut-elle être améliorée?
Plutôt que de modifier directement le style de chaque élément, vous pouvez plutôt prédéfinir une nouvelle classe et l'ajouter à vos éléments correspondants à l'aide de addClass() (une autre méthode jQuery ).
Basé sur cette JSPerf préexistante qui compare css() à addClass(), nous pouvons voir que addClass() est en réalité 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 pour utiliser addClass() à la place:
$('.target').addClass('hidden');
Lors de l'exécution de ce code, plutôt que de modifier directement la propriété style de chacun de vos éléments "cible" correspondants, cette nouvelle classe aura maintenant été ajoutée:
<element class="target hidden"></element>
Avec la nouvelle classe "hidden", cet élément héritera du style déclaré dans votre CSS et votre élément sera configuré pour ne plus s'afficher.
Comme le disent tant d'autres, oui, utiliser des classes sans CSS assigné est tout à fait valable. Plutôt que de les considérer comme des "classes CSS", vous devez simplement reconnaître que la sémantique de classe et d'ID est constituée de groupes et d'éléments individuels.
Je voulais intervenir car j’ai le sentiment qu’un point important n’a pas été soulevé compte tenu de l’exemple. Si vous avez besoin de manipuler visuellement des éléments de longueur variable (dans ce cas, vous utilisez des rangées 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 des milliers de lignes).
Dans cette situation, supposons que nous savons que la colonne 2 a toujours le potentiel d'être cachée (c'est une fonction consciente de votre table), il est donc 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 afin de trouver N éléments, nous devons simplement basculer une classe sur une classe (notre table).
$("table").addClass("target-hidden")
En attribuant un identifiant à la table, cela serait encore plus rapide et vous pourriez simplement vous référer à la colonne en utilisant le sélecteur :nth-child, Ce qui réduirait encore davantage le balisage, mais je ne peux faire de commentaire sur l'efficacité. Une autre raison pour cela est que je déteste le style en ligne et que je vais m'efforcer de l'éradiquer!
Cela n'aura aucun effet si vous appliquez une classe à un élément HTML et que cette classe n'est pas définie en CSS. C’est une pratique courante et, comme Aamir afridi a déclaré que si vous utilisez des classes dans le seul but de js, c’est une bonne pratique de les préfixer avec js-.
Ce n'est pas seulement valable pour calsses, mais aussi pour l'attribut id des éléments html.
Il n’ya aucun problème à utiliser des classes pour simplement interroger des éléments. J'avais l'habitude de donner à ces noms de classe le préfixe sys- (Par exemple, je vais nommer votre classe sys-target) Pour les distinguer des classes utilisées pour le style. Il s'agissait d'une convention utilisée par certains développeurs Microsoft dans le passé. J'ai aussi remarqué une pratique croissante d'utiliser le préfixe js- À cette fin.
Si vous n'êtes pas à l'aise avec l'utilisation de classes à des fins autres que le style, je vous recommande d'utiliser le plug-in jQuery Role.js qui vous permet d'atteindre le même objectif en utilisant l'attribut role. vous pouvez écrire votre balisage sous la forme <td role="target"> et l'interroger à l'aide de $("@target"). La page du projet a une bonne description et des exemples. J'utilise ce plugin pour les grands projets car j'aime beaucoup garder les cours uniquement à des fins de style.