Puis-je utiliser des classes CSS non existantes ?

Question

J'ai un tableau où j'affiche/masque 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 faire cela en une 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 à cet effet ?

<style>.target{}</style>

Y a-t-il des effets secondaires ou une meilleure façon de procéder ?

Answer 1

La "classe CSS" est un terme mal choisi ; class est un attribut (ou une propriété, en termes de script) que vous attribuez aux éléments HTML. En d'autres termes, vous déclarez les classes en HTML, et non en CSS. Dans votre cas, la classe "target" est la suivante fait existent en fait sur ces éléments spécifiques, et votre balisage est parfaitement valide en l'état.

Cela ne signifie pas nécessairement que vous devez déclarer une classe dans le code HTML avant de pouvoir l'utiliser dans le code CSS. 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 a son propre ensemble de règles de traitement des erreurs d'analyse syntaxique qui ne concernent pas du tout 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é. 1

Une fois que vous avez compris cela, il devient clair qu'il n'y a aucun effet secondaire à ne pas définir un .target dans votre feuille de style. 2 Lorsque vous attribuez des classes à vos éléments, vous pouvez référencer ces éléments par ces classes soit dans une feuille de style, soit dans un script, soit dans les deux. Aucun des deux n'a de dépendance vis-à-vis de l'autre. Au contraire, 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 jQuery one-liner.

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 les éléments qui appartiennent à cette classe." Qu'il y ait ou non sont qui appartiennent à la classe en question est une question tout à fait distincte.

---

1 _{C'est aussi pourquoi <a href="https://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/8753329#8753329">un sélecteur CSS ID correspond <em>tous </em>éléments avec l'ID donné sans tenir compte </a>que l'ID apparaisse exactement une fois ou plusieurs fois (ce qui donne un document HTML non conforme).}

2 _{La seule situation que je connaisse où une règle CSS vide de ce type est nécessaire est lorsque certains navigateurs refusent d'appliquer certaines autres règles correctement en raison 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 <a href="https://stackoverflow.com/questions/15301357/safari-bug-first-child-doesnt-update-displayblock-when-items-are-removed-with/15302066#15302066">cette réponse </a>pour un exemple d'un tel bug. Cependant, il s'agit d'un problème de CSS qui n'a rien à voir avec le balisage.}

Answer 2

Il n'y a aucun inconvénient à utiliser des classes qui n'ont pas de styles. En effet, une partie de l'utilité de CSS est qu'il est découplé du balisage et peut styliser ou non les éléments/classes/etc. selon les besoins.

Ne les considérez pas comme des "classes CSS". Considérez-les comme des "classes" que CSS utilise également en cas de besoin.

Answer 3

Selon Spécification HTML5 :

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

De même, dans le version 4 :

L'attribut class joue plusieurs rôles dans le langage HTML :

• En tant que sélecteur de feuille de style (lorsqu'un auteur souhaite attribuer des informations de style à un ensemble d'éléments). à un ensemble d'éléments).
• Pour le traitement à des fins générales par 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.

Answer 4

Vous pouvez utiliser une classe qui n'a pas de styles, c'est du HTML tout à fait valide.

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

Answer 5

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

Il suffit que le nom de la classe se trouve dans le HTML. Il n'est pas nécessaire qu'il figure 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 pour l'utilisation de CSS et de Javascript. Il permet aux concepteurs et aux codeurs de travailler indépendamment sans se gêner mutuellement en utilisant leurs classes respectives.

(remarque : le paragraphe ci-dessus s'applique évidemment davantage aux grands projets, ne vous sentez donc pas obligé d'aller jusqu'à cette extrémité si vous travaillez seul ; je l'ai mentionné pour montrer que les deux peuvent être entièrement séparés).