Vulgarisation et traduction de différents articles sur le selecteur *+*
Elle directement inspirée du flow ‘The Stack’
proposé par:

https://every-layout.dev/layouts/stack/
https://piccalil.li/blog/flow-utility/
Mais qui a été exposée en 2014 par l’excellentissime site A list apart.
Notamment via l’article Heydon Pickering, « Axiomatic CSS and Lobotomized Owls »

L’importance de l’espace blanc dans la mise en page

L’espace blanc, également connu sous le nom d’espace négatif, désigne les zones vides entre et autour des éléments d’une mise en page, tels que le texte, les images et les graphiques.

Bien que souvent sous-estimé, cet espace joue un rôle crucial dans la création d’un composant, d’une mise en page, pour la rendre visuellement attrayante et fonctionnelle.

Donc les éléments du flux html ont besoin d’espace pour les séparer des éléments html qui les précèdent et les suivent.

C’est la raison d’être de la propriété Margin.

(espace extérieure d’un élément)

• pour rappel margin a de nombreuses déclinaison.
• margin, margin-left, margin-right, margin-top, margin-bottom, margin-block start et end, margin-inline start et end.

Cependant, les chartes graphiques, design-system conçoivent les éléments et les composants de manière isolée.

Au moment de l’intégration html/CSS, on ne connait pas toujours le contenu précis présent dans la page,  s’il y aura un contenu environnant ni quelle sera la nature de ce contenu.

Nous avons l’habitude de styliser directement les éléments, ou les classes d’éléments.

Nous faisons en sorte que les déclarations de style appartiennent aux éléments.
Généralement, cela ne pose pas de problème, mais la margin est une propriété qui a une relation partagée par deux éléments voisin.

Le code suivant est donc problématique : p{ margin-bottom: 1rem }

Si le paragraphe est précédé d’un autre élément, l’effet est souhaitable!

Mais un paragraphe seul produit une marge redondante.

L’astuce consiste à styliser le contexte, et non les éléments individuels.

:root {  --flow-space: 1.4rem; }

.flow > * + * {

    margin-top: var(--flow-space, 1em);
}

En utilisant le combinateur de frères et sœurs adjacents (+), la marge-block-start n’est appliquée que lorsque l’élément est précédé d’un autre élément : il n’y a pas de marge « de trop ».
Le sélecteur universel (ou joker) (*) garantit que tous les éléments sont concernés. La construction du selecteur * + * est connue sous le nom de « owl ».