Quand le néophyte commence à comprendre les merveilles du CSS, il arrive qu'il se retrouve atteint d'une maladie particulière que j'appellerai la nommagigite aigüe! D'un seul coup il se dit : "Chouette en nommant mes éléments sur toutes mes pages, je peux faire des modifications d'un seul coup partout sur mon site juste en changeant mon CSS!". Et le voila parti sur son code HTML à donner un nom à tous, je dis bien tous, les éléments de sa page! Et puis le jour où il reprend son site, et décide de faire cette fameuse modification miracle, sa page devient folle et toute la présentation si amoureusement préparée est perdue ou alors il a beau insister rien ne change nulle part... Soit parce qu'il n'a pas modifié le bon élément, soit parce que plusieurs éléments portent le même nom et il y a une palanquée de styles qui s'appliquent au même élément et qui se contredisent!

(Edit : Dr Olivier me signale qu'une forme de cette maladie a été diagnostiquée Classite aigüe sur Alsacréations, ainsi que d'autres maladies intéressantes...)

J'ai eu une période comme ça, et il y en a quelques restes dans le Monde de Miss Mopi, mais heureusement pour moi ça n'a pas duré. J'ai simplifié mon code avant que ça ne devienne ingérable. Ce qui m'a fait vraiment comprendre que certains avaient cet excès c'est quand je me suis retrouvée embrigadée par BoOz pour refaire SPIP-Forum dont le squelette était inspiré de Php-BB version 1 (autrement dit tout en tableau!). Chaque élément ou presque avait un id ou une class et leur définition étaient éclatée, mutualisée, séparée dans le CSS auquel je ne comprenais rien - voire même dans le HTML !

Il m'a fallu non seulement traquer les (innombrables) tableaux inutiles, mais aussi renommer ou débaptiser tous les éléments des pages pour qu'elles deviennent compréhensibles! Et au lieu de tout nommer j'ai usé sans abuser de la hiérarchie des éléments.

Par exemple :

en html :

• <div id="navigation">
• <p class="nav"><a href="index.php" class="nav">Accueil</a></p>
• </div>

en CSS :

• div#navigation { background-color: blue; }
• p.nav { font-weight: bold; }
• a.nav { text-decoration: none; }

(C'est un cas typique qu'on trouvait dans SPIP-Forum)

On peut simplifier tout ça par :

en html :

• <div id="navigation">
• <p><a href="index.php">Accueil</a></p>
• </div>

en CSS :

• div#navigation { background-color: blue; }
• div#navigation p { font-weight: bold; } /* (les p dans div#navigation) */
• div#navigation a { text-decoration: none; } /* les a dans div#navigation */
• Ou encore si on veut être précis et aller au niveau du paragraphe : div#navigation p a { text-decoration: none; } /* les a dans les p dans div#navigation, les a dans des li dans div#navigation ne seraient pas impactés par exemple */

Déjà je trouve que le CSS devient plus clair : on sait quel élément est dans quel autre et on voit tout de suite ce qu'on change vraiment. Ensuite le code HTML est nettement plus lisible, et souvent la page obtenue plus légère.

Attention, il ne faut pas attraper la maladie inverse (la divite anti-nommagigite) et ne nommer que des div ou alors on risque de créer des div juste pour la mise en forme d'un élément (donc inutile!).

Un truc que je trouve génial pour aider à hiérarchiser les styles : on peut nommer les bodys! Quel intérêt? Si sur une page particulière je veux modifier des éléments que je
stylais par hiérarchie et pour éviter d'avoir à les nommer alors que je n'en avais pas eu besoin jusque là, il est possible de faire une règle particulière en reprenant la hiérarchie avec le nom du body en en-tête :

body#carnet div#navigation p a { text-decoration: underline; } /* Je ne vous refais pas l'imbrication ;) et ça ne touche que les pages dont le body a comme id carnet */

Il est possible de comparer (à la date de ce billet) la mise en forme par tableau de SPIP-Forum et la version CSS. En dehors même du passage du tableau au CSS, la simplification des noms rend plus lisible le code.

Bon par contre c'est clair : cette organisation supporte encore moins les mauvaises imbrications ou les erreurs de syntaxes!