Dès qu’un site est un peu compliqué et que le nombre d’imbrications augmente dans le DOM, il peut être tentant d’utiliser des imbrications à rallonge dans les feuilles de style (surtout quand on utilise SASS, qui les encourage). Or, même si les imbrications CSS permettent de cibler les éléments du DOM avec précision, elles rendent ensuite les surcharges de styles très difficiles. A force de surenchères, le risque est de se trouver rapidement un peu perdu.

Notre méthode concernant les sélecteurs CSS consiste à nommer tous nos éléments, (même les « a », « ul », « li » ) de manière unique. Fini les classes génériques du type « title » ou « container ». Chaque élément de notre page voit sa classe préfixée par le nom du bloc dans lequel il se situe (un header, une liste d’événements, un module d’inscription).

Voici un exemple :

Ainsi, pour cibler les éléments d’une liste dans notre feuille de style, plus besoin d’écrire, par exemple :

.next-events ul li

mais simplement :

.next-events-list-item

En plus d’améliorer la lisibilité du code et d’éviter les problèmes de surcharge, cette méthode présente au moins deux avantages :

– les styles étant désormais liés aux éléments, et non plus à la structure dans lesquels ils sont imbriqués, on peut changer la structure html de nos blocs sans qu’aucun élément ne perde son style.

– les éléments étant désormais ciblés par leurs classes, et non plus par leurs types (a, ul, li), on peut changer les types sans que les éléments perdent leurs styles.

En fin de compte, donner à chaque élément un nom de classe unique permet de contourner plusieurs difficultés (qui se posent souvent au moment de la recette d’un site) tout en rendant le code plus lisible !

Par Timothée 21 mai 2015 Comments Off on CSS – Fini les imbrications à rallonge