Squelettes de la dist : améliorer le markup et passer à BEM
Hello,
En voulant créer des nouveaux "thèmes pour les squelettes de la dist":https://zone.spip.org/trac/spip-zone/browser/themes/dist/v1, j'ai rencontré des limitations dûes au markup actuel.
Par exemple, certains éléments sans classe sont impossibles à cibler, il y a des retours lignes en dur, etc. En certains endroits, cela limite pas mal les possibilités. J'aimerais lancer un petit refactoring du markup afin qu'il soit plus facile de thémer les squelettes et de maintenir les styles.
Il s'agirait principalement d'améliorer la nomenclature des classes, en changeant le moins possible le markup afin que les thèmes actuels restent compatibles (ou au prix d'adaptations minimes). On ajouterait donc des nouvelles classes, sans supprimer les classes actuelles (dans un 1er temps tout du moins ?). Cela pourrait être l'occasion de passer à "la méthodologie BEM":https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html pour la nomenclature des classes.
Exemple n°1
Exemple avec le copyright et les liens dans le footer. Actuellement, il n'y a pas de classe autour du copyright, les liens ne sont pas encapsulés dans un conteneur, et les séparateurs « | » n'ont pas de classe n'ont plus. Il est donc quasiment impossible de changer l'agencement général, de changer l'apparence des séparateurs, etc.
<p class="colophon">
2009 - 2019 Thèmes SPIP
<br>
<a rel="contents" href="..." class="first">Plan du site</a> | <a href="ecrire/">Espace privé</a> | <a href="..." rel="nofollow">Se déconnecter</a> |
<a rel="nofollow" href="...">Contact</a> | <a href="..." rel="alternate" title="Syndiquer tout le site" class="last">RSS 2.0</a>
</p>
Voici ce que ça pourrait donner en refactorisant :
- Le copyright est encapsulé dans un span
- Les liens sont considérés comme faisant partie d'un menu, et sont donc encapsulés dans un composant « menu »
- Les séparateurs sont fait en CSS, pas en dur dans le HTML
<p class="colophon">
<span class="colophon__coyright">2009 - 2019 Thèmes SPIP</span>
<div class="colophon__menu">
<ul class="menu menu_footer">
<li class="menu__item menu__item_plan">
<a href="..." class="menu__link first" rel="contents">Plan du site</a>
</li>
<li class="menu__item menu__item_backoffice">
<a href="...">Espace privé</a>
</li>
<li class="menu__item menu__item_logout">
<a href="..." class="menu__link" rel="nofollow">Se déconnecter</a>
</li>
<li class="menu__item menu__item_contact">
<a href="..." class="menu__link" rel="nofollow">Contact</a>
</li>
<li class="menu__item menu__item_rss">
<a href="..." class="menu__link last" rel="alternate" title="Syndiquer tout le site">RSS 2.0</a>
</li>
</ul>
</div>
</p>
Avec ça, on peut faire beaucoup plus de choses : afficher le copyright et le menu côte-à-côte ou l'un sous l'autre, afficher le menu à l'horizontale ou à la verticale, choisir l'apparence des séparateurs, etc.
Exemple n°2
Autre exemple avec les résumés d'articles.
<li dir="ltr" class="hentry clearfix text-left">
<strong>
<a href="...">
<img src="..." class="spip_logo" alt="" width="150" height="185">
Joie entourée d’angoisses (1)
</a>
</strong>
<br><small>6 mai 2009, par Victor Hugo</small>
<div class="introduction entry-content">
<p>
Lorem ipsum (...)
</p>
</div>
</li>
En refactorisant :
- Le composant de base est nommé « resume », et on voit qu'il s'agit d'une variante « article ».
- Tous les éléments ont une classe.
- Le titre est encapsulé dans un
<h3>
plutôt qu'un<strong>
. - L'image est sortie du titre, et sa largeur n'est pas limitée à 150px (ça se ferait en CSS).
<li dir="ltr" class="resume resume_article hentry clearfix text-left">
<img src="..." class="resume__logo spip_logo" alt="" width="960" height="480">
<h3 class="resume__title">
<a href="...">
Joie entourée d’angoisses (1)
</a>
</h3>
<small class="resume__publication">
<span class="resume__date">6 mai 2009</span><span class="sep">,</span> <span class="resume__author">par Victor Hugo</span>
</small>
<div class="resume__content introduction entry-content">
<p>
Lorem ipsum (...)
</p>
</div>
</li>
Voilà, ce ne sont que des exemples et non pas des propositions définitives. C'est juste pour montrer la direction dans laquelle aller.
HTML5
Il est tentant de vouloir en profiter pour passer en HTML5, mais je préfère laisser cet aspect à part (il y a déjà des tickets dessus je pense).
Français/anglais ?
Actuellement pour la nomenclature des classes, il y a un mélange de français et d'anglais. Personnellement, ça ne me dérange pas :) J'ai arrêté d'essayer de tout franciser à tout prix, je préfère partir sur une base en anglais, avec quelques éléments en français quand il n'y a a pas le choix (par exemple quand on fait référence aux objets spip : breve, rubrique, etc.).
Cahier des charges
- Faire en sorte que les thèmes existants restent globalement compatibles (moyennant peu d'adaptations).
- Passer la nomenclature des classes à BEM.
- Ajouter des classes sur tous les éléments n'en ayant pas.
- Retirer les retours ligne en dur :
<br />
. - Travailler dans une branche nommée « bem » du dépôt git : https://git.spip.net/SPIP/dist/
- Pas de HTML5 pour l'instant.
- Classes en english avec des exceptions en français