De l’obsession du DIV

Je m’adonne à faire beaucoup de design web ces temps-ci, notamment en raison de la refonte de Fanatique.ca et quelques développements pour iWeb. Ceci m’amène à lire un peu partout ce qui se fait comme grandes tendances et nouvelles techniques de codage CSS2 (notamment quelques hacks pour IE7 qui gère bien mal certains attributs de positionnement relatif/absolu).

Or je constate une chose : plusieurs n’ont pas compris ce à quoi doit servir CSS. C’est d’abord et avant tout un outil de définition stylistique pour des éléments de contenus : en-têtes, paragraphes, blocs de citation, listes, etc. Or à voir certains webdesigners, on dirait que CSS n’est qu’un moyen de donner du style à des blocs (DIV) sans laisser aucune trace de sémantique.

Prenons cet exemple :

<div class= »titre »>Ceci est un titre</div> <span class= »soustitre »>Publié par Chose, <span class= »rouge_date »>hier</span></span>
<div class= »contenu »>
Il est associé à un paragraphe et ceci est un <a href= »http://www.estrade.ca/# » mce_href= »http://www.estrade.ca/# » class= »lien_contenu »>lien</a> qui s’affiche de façon particulière dans ce dernier.
</div>

C’est quoi la logique dans un tel contexte? Comment s’y retrouver? Déjà que l’exemple a au moins la bonne idée d’utiliser des classes relativement explicites (titre, sous-titre, contenu, etc.)… mais rendu à un certain point, le programmeur n’aura plus d’idée d’attributs et l’on verra apparaître des trucs ridicule du genre class= »sous_titre_section_droite » et compagnie.

Cet exemple pourrait être réduit à utiliser un style plus axé sur la sémantique de la page. C’est pourtant pas compliqué : pas besoin de donner une classe à tout ce qui bouge! Simplement qu’on a à utiliser la hiérarchie CSS, une technique trop peu souvent utilisée, ou encore les styles conjoints. Voici un petit exemple tiré du précédent :

<h1>Ceci est un titre</h1>
<h2>Publié par Chose, <span class= »date rouge »>hier</span>.</h2>
<p>
Il est associé à un paragraphe et ceci est un <a href=http://www.estrade.ca/ »>lien</a> qui s’affiche de façon particulière dans ce dernier.
</p>

On voit donc un code beaucoup plus épuré. Tout ce qu’il y a à savoir c’est qu’en utilisant la hiérarchie des styles on peut arriver au même résultat qu’initialement. Voici un exemple de feuille de style qui pourrait y être associée :

H1       { font-size: 150%; }
H2       { font-size: 110%; }
.date    { font-style: italic; }
.rouge  { color: #990000; }
P          { text-align: justify; }
P a        { color: #00ff00; }
P a:hover { color: #ff0000; }

Tout ce qu’il y à savoir c’est qu’en les séparant par des espaces, les classes additionnent leur propriétés (ainsi la date sera en italique et rouge). Pour le reste, un paragraphe doit rester un paragraphe. Il n’y a pa de raison valable pour qu’il devienne soudainement un DIV! Il en va de même pour tous les éléments :

• Un menu, qu’il soit horizontal ou vertical, est une liste ordonnée (UL).
• Une image n’a pas à être dans un bloc pour être déplacée en flottement à gauche/droite.
• Un titre doit être identifié comme tel afin d’être mieux pris en compte lors de l’indexation de vos pages.

Donc mon conseil : écrivez votre page comme s’il s’agissait d’un véritable document, avec tous les attributs et types bien explicités. Puis à la fin, utilisez le CSS pour positionner vos éléments, tout simplement. Épurez vos styles le plus possible. Utilisez la hiérarchie des styles et l’addition de ceux-ci… bref : designez intelligemment!