Construire sa page HTML sans ID ni Class
Construire sa page sans indiquer d'identifiant pour aucune zone de la page, cela semble attrayant. Avec CSS3 et ses formidables sélecteurs, il est désormais possible de pointer des zones en fonction de leur position ou leur ordre dans la page.
Avec nth-of-type, par exemple, je peux dire, vous, mes petits paragraphes que j'aime ; quand vous êtes en premier vous avez une lettrine, tous les nombres impairs vous êtes gris et puis, tiens toi, le sixième, bah tu passes à la ligne.
Dans le monde de la CSS2, les petits paragraphes devaient se voir marquer d'une étiquette pour lui appliquer des styles. Avec le CSS3, on rentre dans un procédé plus mathématique, calculatoire. Le premier avantage est de simplifier l'écriture du code HTML en éliminant les class désignées pour le style uniquement ; le deuxième avantage est de pouvoir appliquer des feuilles de styles dédiées en fonction d'un navigateur, d'une taille d'écran… sans que cela soit le parcours du combattant pour s'y retrouver dans ses class.
Un matin CSS Wizardry s'est levé et s'est dit qu'avec nth-of-type combiné avec des body>div (première division après la balise body), il pouvait se passer des identifiants pour les divisions. En analysant sa réalisation, il a pu en tirer les avantages et les désavantages.
Les avantages
- Moins de code dans la page HTML
- Favorise la structuration du code HTML
- Favorise la sémantisation
Les désavantages
- La syntaxe est difficile à appréhender
- Peut pas bouger une zone, sinon le style ne s'applique plus
- La feuille CSS décrit la structure documentaire, alors qu'elle ne doit décrire que le style
- Un élément à position variable, genre image, ne pourra pas être pris en compte
- Où est défini ce style dans mon CSS, je trouve pas où c'est ?
- Jenga time, je modifie une balise et tout le code est à refaire
Donc, sympa la CSS3, vraiment super puissant, en revanche les balises ne sont pas des positions, il faut les appeler par leurs noms. Si les sélecteurs sont utiles pour le contenu, ils se révèlent moins indispensables pour les contenants.
Les sélecteurs permettent par exemple de pointer des lignes ou des cellules d'un tableau, mais pas de pointer le tableau, car celui-ci peut être déplacé dans divers types de contenants.