Ajout de nombreuses classes CSS aux éléments HTML

Question

J'ai un tableau de messages et l'un de mes utilisateurs a écrit un script greasemonkey pour styliser divers éléments de la page. Il a fait un excellent travail avec cela, mais pour le rendre plus facile, la première étape de son script consiste à analyser la page actuelle et à ajouter plusieurs classes css à presque tous les éléments html de la page. la plupart d'entre eux ne sont pas du tout habitués à styler la page, mais plutôt à lui faciliter l'interrogation des quelques éléments par page qu'il modifiera réellement. Par exemple, class = " thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345 " <, etc., etc.

est-ce une pratique standard? existe-t-il des inconvénients à l'ajout de nombreuses classes css inutiles, soit en javascript, soit sur le serveur si je les ajoutais aussi aux pages servies?

Answer 1

Cela semble utiliser des classes pour incorporer des métadonnées arbitraires dans des éléments, ce qui n’est certainement pas la raison pour laquelle l’attribut class a été conçu. Etant donné que ses effets commencent et finissent par un script greasemonkey et sont donc localisés sur le client, cela semble un bidouillage assez inoffensif, mais je ne conseillerais pas de le dupliquer du côté serveur.

Malheureusement, HTML n'offre pas beaucoup d'alternatives en ce qui concerne les métadonnées, si ce n'est que de coller des attributs non valides. Il existe donc un mécanisme qui ajoute une signification sémantique à la "classe". attribut dans les balises existantes, à savoir microformats . Il y a beaucoup de battage médiatique à couper le souffle autour des microformats, mais dans l'ensemble, ils tournent autour d'une meilleure pratique pour les zones où l'utilisation du tout-xml est hors de question.

Answer 2

En termes de sémantique, oui, il y a des inconvénients. Si vous avez des classes qui ne décrivent pas ce qu'est réellement l'élément et ne le sont qu'à des fins de style, cela peut vous nuire par la suite si vous décidez de revoir la conception et / ou de vous restructurer.

par exemple, BAD:

<div class="header red left-side">

BON:

<div class="header main current-event">

Answer 3

S'il n'y a pas de style associé à une classe affectée à element, alors je pense que le navigateur l'ignorera. Cela ne fera donc pas beaucoup augmenter votre temps de traitement des pages si c'est ce qui vous inquiète.

Cependant, s'il existe de nombreuses classes pour chaque élément, vous devez comprendre que vous utilisez une bande passante précieuse et que vous augmentez le temps nécessaire pour charger la page entière de cette façon. Vous pouvez éviter ce problème en externalisant le CSS afin que le navigateur puisse le mettre en cache.

Utilisez-vous jquery pour interroger les éléments que vous souhaitez réellement modifier? Il pourrait s’avérer plus facile de choisir ces éléments avec les sélecteurs jquery qui semblent difficiles ou impossibles avec JavaScript standard et vous pouvez ainsi éventuellement éviter toutes ces classes superflues inutiles.

En bout de ligne, il n’ya aucun problème à utiliser un grand nombre de classes si elles sont nécessaires, et c’est parfaitement bien pour la production, mais si vous n’en avez pas besoin, comme dans votre cas, il doit exister une meilleure solution peut éventuellement venir avec.

Answer 4

Juste pour un point de données, j’ai jeté un coup d’oeil au code HTML de GMail hier (leurs boutons sont très jolis) et c’est plein de ce genre de choses.

Voici un exemple:

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"

Answer 5

Les classes ne sont pas uniquement destinées aux CSS, elles permettent de catégoriser les sections de balisage. Appliquer un style basé sur cette catégorisation n’est qu’une utilisation. Donc, si les classes sont utiles à d’autres fins de catégorisation, c’est très bien, et donc une très bonne pratique.