Si Zeldman le dit…
Jeffrey Zeldman, mon idole de toujours, s’est récemment proclamé chevalier des id et des sélecteurs descendants dans son billet “In Defense of Descendant Selectors and ID Elements”.
C’est assez bizarre de dire ça, mais je ne suis pas d’accord avec lui.
Pas forcément avec son message général, mais avec ses arguments que je trouve inexacts.
Argument 1 : ça n’arrive jamais
Le premier argument de Zeldman, que je traduis est :
“Dans ce cas particulier (et rares) cas, où plusieurs développeurs ont ajouté règle après règle à une énorme feuille de style informe, la mise en garde de Nicole (Sullivan) pour éviter les sélecteurs descendants basé sur id est probablement sage.”
Mes yeux voient bien les mots “rare” et “particulier”, et pourtant mon cerveau lit “habituel” et “classique”.
Parce que vous je ne sais pas, mais dans la vraie vie les projets longs existent, de même que ceux où de multiples développeurs interviennent, avec des niveaux de compétences différents et des conventions d’écritures différentes et des feuilles de styles longues comme le bras. Bref, des projets “normaux” quoi.
Argument 2 : les id c’est mieux que des classes multiples
Pour dire que les ID sont une bonne chose, Zeldman compare les deux exemples suivants :
<div id= "footer"> <p>salade</p> <p>tomate</p> <p>oignons</p> </div>
et
<div> <p class="footer-item">salade</p> <p class="footer-item">tomate</p> <p class="footer-item">oignons</p> </div>
Et en conclut que la première solution est meilleure et qu’il est préférable de cibler via #footer p.
Mais pourquoi ne compare-t-il pas tout simplement div id=”footer” et div class=”footer” ?
Argument 3 : les id c’est plus sémantique que des classes
Zeldman affirme :
“properly used ids with descendant selectors are preferable because more semantic and lighter in bandwidth.”
Traduction : “Les id correctement utilisés avec les sélecteurs descendants sont préférables car plus sémantiques et plus performants.”.
En ce qui concerne la performance, il a été démontré que la différence id/classe est négligeable en CSS, mais bon, soit.
Et pour ce qui est de la “sémantique”, j’en reste sans voix. En quoi un id=”footer” serait plus sémantique qu’un class=”footer” ? Et en quoi “#footer ul li a” serait plus sémantique que “.footer a” ?