Forum

Réagissez dans les forums de JDN Développeurs

Classitis et Divitis sont deux maladies (baptisées par Jeffrey Zeldman) qui affligent les développeurs Web quand vient l'heure de passer leur site de l'état d' "ensemble de tables imbriquées" à celui de "site tout CSS" ou, plus raisonnablement, de site "hybride" (un minimum de tables pour un fort usage de CSS). On les rencontre fréquemment chez ceux qui doivent "passer aux feuilles de style" de manière un peu forcée, et à l'inverse chez ceux qui considère que CSS est le Saint Graal, s'y plongant dès lors trop vite et sans prendre vraiment le temps de réfléchir.

On peut résumer ces deux maux avec un seul terme : surplus. Surplus de classes pour la classitis, et surplus de div pour la divitis. La différence peut sembler subtile, mais elle est bien réelle.

Classitis
Classitis : utiliser un sélecteur "class" quand ce n'est pas nécessaire :

<p class="bloc"><font class="verdana"><font class="gras rouge">Attention</font>, vous entrez dans une <font class="gras rouge majuscule italique">zone de danger</font>! <a href="/" class="lien rouge">Cliquez ici!</a></font></p>

La "philosophie" CSS serait la suivante : les balises ont leurs propres sémantiques, tout ce qui touche à la mise en page est dévolu aux feuilles de style. C'est pourquoi la balise FONT est bannie des design CSS, et c'est aussi pourquoi l'exemple ci-dessus n'apporte aucune amélioration au balisage par rapport à une version visuellement équivalente en "vieil HTML".
Une version plus sémantique serait :

<p class="bloc"><strong>Attention<strong>, vous entrez dans une <strong><i>zone de danger</i></strong>! <a href="/"Cliquez ici!</a>

A charge ensuite pour CSS d'appliquer les couleurs, polices et autres frivolités qui n'ont pas leur place dans les balisages modernes.

Divitis
Divitis : plus de balises "div" que nécessaire :

<div class="bloccontenu"><div class="bloccentre"><div class="blocwarning"><strong>Attention</strong>, vous entrez dans une <strong><i>zone de danger</i></strong>!</div><div class="lien"><a href="/">Cliquez ici!</a></div></div></div>

Ici encore, tous les avantages de l'utilisation des divs, des classes et des CSS est perdu en voulant absolument baliser le plus possible les éléments ayant une spécificité graphique... Sans se rendre compte que les CSS peuvent appliquer plusieurs règles à un élément, et cibler directement les sous-éléments d'une classe.
Une version un peu plus propre serait :

<div class="warning"><strong>Attention</strong>, vous entrez dans une <strong><i>zone de danger</i></strong>! <a href="/">Cliquez ici!</a></div>

Là encore, il sera facile de créer une CSS qui affichera ce texte comme désiré.

En sachant reconnaître et éviter classitis et divitis, non seulement vous simplifiez votre balisage (et le rendez plus logique aux navigateurs et machines de traitement comme le Googlebot), mais vous condensez également votre CSS. Classitis et divitis enlèvent sens et structure aux pages Web, et empêchent de produire un contenu plus facile à traiter et à mettre à jour.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius