Simplifions le code des menus de SPIP

La simplication du code HTML et CSS que je propose ci-après convient pour TOUS les menus des squelettes par défaut de SPIP. Elle permet de partir sur de bonnes bases et facilite les variantes ou les modifications ultérieures.

Rappel du code des squelettes par défaut

Les squelettes par défaut de SPIP contiennent différents menus de couleurs pastel, pour les brèves, les mots-clés, les rubriques, etc. Ils ne sont pas tous construits de la même façon, mais la structure qui revient le plus fréquemment est celle-ci (prenons par exemple le menu de brèves de la page d’accueil) :

<!-- Breves -->

<h1 class="structure"><:dernieres_breves:></h1>

<B_breves>
<div class="menu">
<div class="breves">

<div class="menu-titre"><:breves:></div>

<ul class="menu-liste">
<BOUCLE_breves(BREVES){par date}{inverse}{0,8}>
<li class="menu-item">
<i>[(#DATE|affdate_court)]</i>: 
<a href="#URL_BREVE">#TITRE</a>
</li>
</BOUCLE_breves>
</ul>

</div>
</div>
</B_breves>

À mon avis, ce petit menu utilise une avalanche de sélecteurs CSS (6 pour être précise), quand un seul suffirait. En effet, en utilisant le principe de l’héritage [1], un seul sélecteur, parent d’un HTML bien structuré suffit largement pour un menu de ce type ; ce qui allégera d’autant le code, améliorera sa lisibilité et donc sa compréhension et donc sa maintenance.

 L’inconvénient du menu par défaut est que si la boucle ne renvoie aucune brève, rien n’est affiché sauf... le titre du menu !!
Pour éviter cela, construisons bien nos boucles en plaçant tout, oui TOUT, entre les balises de code optionnel <B_breves>, sans rien laisser traîner en dehors.

 Les deux div (menu et breves) sont redondantes : on peut tout aussi bien ne faire usage que d’une seule ! Voici pourquoi.
Si le sélecteur menu permet d’attraper d’un coup tous les menus (brèves, mots-clès, rubriques, etc) pour leur appliquer un style homogéne, on peut s’en passer, puisqu’on obtient le même effet en remplaçant .menu {...} par .rubriques, .breves, .forums, .divers {...} pour attribuer les caractéristiques communes à tous ces menus.
En tout cas, point n’est besoin de deux div. Il peut être effectivement plus confortable de maintenir l’usage de deux sélecteurs CSS différents, mais... sur la même div, comme ceci : <div class="menu breves">.

Aucun changement pour le reste : on utilisera .breves {...} pour attribuer les caractéristiques spécifiques au menu de brèves, et ainsi de suite pour chaque menu.

 Un seul titre suffit ! Plaçons-le à l’intérieur de cette unique div, en titre de second niveau, car si la page est correctement structurée, le h1 est déjà utilisé, certainement en titre de page. Le titre ne nécessite aucun sélecteur dédié, puisqu’il suffit de coder ainsi pour le styler : .breves h2 {...} (ne s’appliquera qu’aux h2 contenus dans la div breves et à aucun autre).

 La liste peut être ouverte par un simple <ul>, et les items par <li>, et on se débarrasse définitivement des sélecteurs .menu-liste et .menu-item, inutiles. De même que précédemment, on utilisera .breves ul {...} et .breves ul li {...}.

 Ah, oui, vous avez remarqué : j’ai oublié quelque chose. Si la plupart des menus de SPIP sont constitués d’une liste, et seulement d’une liste (certes plus ou moins imbriquée), certains contiennent également quelque texte, comme le menu auteur par exemple : le nom de l’auteur vient en titre, puis suit une courte bio, avant la liste de ses articles. Cette bio sera dotée de balises <p>, que l’on stylera ainsi dans la feuille CSS : .auteur p {...}.

Quoi d’autre ?

Code simplifié

Dans le fichier HTML, 10 lignes suffisent (soit moitié moins) :

<B_breves>
<div class="breves">
    <h2><:dernieres_breves:></h2>
    <ul>
        <BOUCLE_breves(BREVES){!par date}{0,8}>
        <li>[(#DATE|affdate_court) : ]<a href="#URL_BREVE">#TITRE</a></li>
        </BOUCLE_breves>
    </ul>
</div>
</B_breves>

Le style correspondant dans la feuille de style CSS, est d’une simplicité enfantine [2] ; il suffit de suivre la structure HTML :

.breves {...}
.breves h2 {...}
.breves ul {...}
.breves ul li {...}
.breves p {...}

C’est tout !