Recréer les modulos en css

Qu'est ce que le modulo ? A quoi ça sert ?

En mathématique et en programmation, il s'agit du reste d'une division.(ex: 4/2 = 2 reste 0, ou encore 10/3 = 3.33... reste 1).
Dans cet article je m'intéresse au modulo pour l'intégration graphique de sites Internet.
On va utiliser le modulo pour gérer les espaces d'une grille d'éléments notamment lorsqu'il y a trois éléments par ligne.
Par exemple :

<ul>
 <?php for($i==1; $i<=6; $i++) : ?>
 <li class="item<?php echo (3%$k==0?' no-space':'' ?>">Texte</li>
 <?php endfor; ?>
</ul>

<!-- Ce qui donne -->

<ul>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item no-space">Texte</li>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item no-space">Texte</li>
</ul>

Ainsi avec un peut de css on a une grille qui se cale impeccable :

ul {width: 940px; text-align: center;}
ul li.item {display: inline-block; width: 300px; margin: 0 20px 20px 0;}
ul li.no-space {margin-right: 0;}

Les limites

A mon sens, cela pose problème dès que l'on va avoir besoin de bouger cette grille, qu'il s'agisse de responsive ou de système de filtres. On pourrait imaginer une grille qui va changer lorsque l'utilisateur veut classer par prix ou par nom, etc. Dans ce cas, si la grille est juste mise en jour en javascript sans une re compilation serveur ou javascript, notre ordre et nos modulos ne correspondront plus.

Le modulo en css

Il peut y avoir une multitude de scénarios où l'on aura besoin d'un modulo plus souple et c'est pourquoi je vous invite à utiliser la pseudo class css :nth-child().

pour reprendre mon exemple ci-dessus :

<style>
 ul {width: 940px; text-align: center;}
 ul li.item {display: inline-block; width: 300px; margin: 0 20px 20px 0;}
 ul li:nth-child(3n) {margin-right: 0;}
</style>

<ul>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
 <li class="item">Texte</li>
</ul>

Vous avez repéré ":nth-child(3n)", pour plus de détails sur la pseudo classe elle-même visitez le site de W3Schools par exemple (il y en a quelques autres qui traitent le sujet de façon globale). Pour l'heure ce qui m'intéresse particulièrement c'est le 3n qui se trouve en argument.
Je pense que vous l'aurez compris "nth-child(3n)" veut dire "le troisième enfant" et c'est récursif, tous les 3eme enfants seront concernés par cette mise en forme.

On note qu'il n'est plus nécessaire de faire le calcul du modulo pour chaque ligne en php, smarty ou tout autre compileur de template, c'est le moteur css qui va s'en charger.
Mais il devient aussi bien clair que quelque soit l'ordre des la liste, l'utilisateur va pouvoir "jouer" avec les éléments sans faire sauter la mise en page et sans besoin de re compiler la page.

A cette époque ou le javascript est devenu incontournable pour l'expérience utilisateur au point même d'en venir à créer des site entièrement sur des moteur js tels que Backbones ou Angular.
Ce genre de pseudo classe est tout d'abord un bon réflex, mais surtout un bon moyen de se simplifier la vie tout en allégeant son code.

Merci de m'avoir lu, j'espère que ça vous sera utile.
Enjoy !!