Locality of behaviour et sobriété numérique

2025-01-30 dev | tags : css lob zola

Lors de la réalisation des précédents « moteurs de blogs statiques », notamment via 11ty, je m'efforçais d'éviter l'utilisation de javascript côté client, en passant par une phase de précompilation, convertissant les éléments mathématiques en mathml via mathjax. Et, comme spécifié dans un autre post, je passais plus temps à la configuration du générateur de sites statitiques, plutôt qu'à l'écriture d'articles.

Pour le style, j'utilisais sass en spécifiant une classe spécifique au body, <body class="page-article">, puis créais les styles spécifiques. J'obtenais quelque chose similaire à ce qui suit:

body.page-article,
body.page-list-articles,
body.page-... {
    main { ... }
}

Au final, je n'avais plus envie de toucher au style, car il fallait que je me remémore à chaque fois la logique mise en place. J'ai également utilisé une approche BEM, mais le code HTML devenait pour moi illisible car trop chargé (car chaque élément stylisé devait avoir une classe qui lui est propre).

De plus, en utilisant un moteur de template comme tera, j'ai remarqué que l'utilisation de l'héritage (donc via {% extends "base.html" %}) ne pouvait être couplé à l'utilisation des includes ni des macros, dans lesquelles je ne pouvais surcharger la balise head.

Par exemple, en prenant le code suivant:

<!-- file macros.html -->
{% macro blog_list(pages) %}

  {% block extra_head %}
    <style>ul { padding-left: .5rem; }</style>
  {% endblock %}

  {% for page in pages %}
    <ul><li>{{ page.title }}</li></ul>
  {% endfor %}
{% endmacro %}

J'aimerais que le style de ul soit juste appliqué sur la balise ul qui suit, et pas sur toutes les unordered list de la page. Je pourrais rajouter un paramètre à blog_list spécifiant une classe et modifier le style en fonction, mais ce serait rajouter un niveau de complexité.

Depuis la sortie de htmx, je me suis intéressé au Locality of Behavious (LoB): le fait qu'un bout de code donne toutes les informations nécessaires pour savoir de qu'il fait. Pour styliser une page web, on peut attribuer des classes à une balise, puis créer un style dans un fichier différent, on doit donc ouvrir plusieurs fichiers pour savoir comment le navigateur va afficher comme rendu, ce qui est contraire à la philosophie LoC.

Tailwind a une approche on peut dire de LoB: les classes utility first parlent d'elles-même, mais cela rajoute une lourdeur au code HTML, celui-ci étant censé être sémantique. Une solution à venir sera sans doute l'utilisation de @scope en css:

<main>
  <style>
  @scope {
      :scope { border: 1px solid black; }
      h1 { border-bottom: 2px solid blue; }
  }
  </style>
  <h2>Hello World</h2>
</main>

Cela pourrait résoudre le problème rencontré avec les macros ou l'utilisation des includes, malheureusement la règle n'est pas encore disponible sur la majorité des navigateurs web, notamment Mozilla Firefox.

Une alternative pour moi a été d'utiliser css-scope-inline, qui a une approche similaire (mais réduite) à ce que @scope pourra fournir, le code précédent peut être réécrit comme suit:

<main>
  <style>
    me { border: 1px solid black; }
    me h1 { border-bottom: 2px solid blue; }
  </style>
  <h2>Hello World</h2>
</main>

L'inconvénient est que le style de la page dépendant maintenant d'un code javascript (de 15 lignes). Cela me posait problème, car je m'intéresse à une mouvance sur la sobriété du net, où je lis beaucoup d'opinions de personnes souhaitant des sites web sans javascript inutile. J'essaie d'avoir une approche tentant de rendre ce blog léger tout en conciliant mon plaisir l'entretenir.

Article publié le 30 janvier 2025.