11
Les fondations
Nommer les éléments
Lorsque.vous.nommez.les.ID.et.les.classes,.il.est.important.que.les.noms.choisis.soient.aussi.
indépendants.que.possible.de.la.présentation..Par.exemple,.si.vous.souhaitez.que.vos.messages.de.notification.de.formulaire.s’affichent.en.rouge,.vous.pouvez.certes.leur.attribuer.
une.classe.nommée.rouge..Ce.choix.convient.tant.qu’il.n’y.a.pas.d’autre.élément.rouge.
dans.la.page,.mais.si.vous.souhaitez.que.les.étiquettes.du.formulaire.soient.rouges.également,.vous.allez.devoir.deviner.à.quel.élément.associer.cette.classe.et.cela.commencera.à.
devenir.confus..Imaginez.à.quel.point.la.situation.deviendrait.déroutante.si.vous.utilisiez.des.
éléments.de.présentation.dans.tout.votre.site !.Les.choses.se.compliqueraient.encore.si.vous.
décidiez.de.changer.l’apparence.des.notifications.de.formulaire.pour.les.afficher.en.jaune.et.
non.en.rouge..Vous.devriez.alors.modifier.tous.les.noms.de.classes.ou.vous.contenter.d’utiliser.une.classe.appelée.rouge.pour.afficher.les.éléments.en.jaune…
Il.est.en.fait.préférable.de.nommer.les.éléments.en.fonction.de.ce.qu’ils.sont.plutôt.que.de.
l’apparence.qu’ils.possèdent..Le.code.devient.ainsi.plus.compréhensible.et.ne.risque.jamais.
de.se.désynchroniser.avec.la.mise.en.page..Dans.l’exemple.précédent,.au.lieu.d’attribuer.
la.classe.rouge.aux.notifications,.vous.pouvez.leur.donner.un.nom.plus.descriptif,.comme.
.avertissement.ou..notification.(voir.Figure 1.4)..L’aspect.le.plus.intéressant.des.noms.
descriptifs.tient.à.ce.que.vous.pouvez.les.utiliser.dans.tout.le.site..Par.exemple,.vous.pouvez.
aussi.utiliser.la.classe..notification.avec.d’autres.types.de.messages.et.leur.attribuer.un.
style.complètement.différent.en.fonction.de.l’endroit.où.ils.se.trouvent.dans.le.document..
Figure 1.4
Bons et mauvais noms d’ID.
Mauvais noms
rouge
colonneGauche
navHaut
premierPara
Bons noms
erreur
contenuSecondaire
navPrincipale
intro
Lorsque.vous.écrivez.des.noms.de.classe.et.d’ID,.soyez.attentif.à.la.casse,.car.les.navigateurs.considèrent.que..nimportequi.est.une.autre.classe.que..nimporteQui..Le.meilleur.
moyen.de.gérer.ce.problème.consiste.à.respecter.systématiquement.la.même.convention.de.
nom..Pour.ma.part,.j’écris.tous.mes.noms.d’ID.et.de.classes.en.minuscules,.avec.des.tirets.
pour.séparer.les.mots..C’est.une.écriture.plus.lisible..nimporte-qui.est.ainsi.plus.lisible.
que.nimporteQui.
ID ou classes ?
Il.est.parfois.difficile.de.savoir.si.un.élément.doit.posséder.un.ID.ou.un.nom.de.classe..En.
règle.générale,.les.classes.doivent.s’appliquer.aux.éléments.de.nature.similaires,.qui.peuvent.apparaître.à.plusieurs.endroits.dans.la.même.page,.alors.que.les.ID.doivent.s’appliquer.
aux.éléments.uniques..Reste.dès.lors.à.savoir.quels.éléments.sont.par.nature.similaires.et.
lesquels.sont.uniques.
Les fondations
Nommer les éléments
Lorsque.vous.nommez.les.ID.et.les.classes,.il.est.important.que.les.noms.choisis.soient.aussi.
indépendants.que.possible.de.la.présentation..Par.exemple,.si.vous.souhaitez.que.vos.messages.de.notification.de.formulaire.s’affichent.en.rouge,.vous.pouvez.certes.leur.attribuer.
une.classe.nommée.rouge..Ce.choix.convient.tant.qu’il.n’y.a.pas.d’autre.élément.rouge.
dans.la.page,.mais.si.vous.souhaitez.que.les.étiquettes.du.formulaire.soient.rouges.également,.vous.allez.devoir.deviner.à.quel.élément.associer.cette.classe.et.cela.commencera.à.
devenir.confus..Imaginez.à.quel.point.la.situation.deviendrait.déroutante.si.vous.utilisiez.des.
éléments.de.présentation.dans.tout.votre.site !.Les.choses.se.compliqueraient.encore.si.vous.
décidiez.de.changer.l’apparence.des.notifications.de.formulaire.pour.les.afficher.en.jaune.et.
non.en.rouge..Vous.devriez.alors.modifier.tous.les.noms.de.classes.ou.vous.contenter.d’utiliser.une.classe.appelée.rouge.pour.afficher.les.éléments.en.jaune…
Il.est.en.fait.préférable.de.nommer.les.éléments.en.fonction.de.ce.qu’ils.sont.plutôt.que.de.
l’apparence.qu’ils.possèdent..Le.code.devient.ainsi.plus.compréhensible.et.ne.risque.jamais.
de.se.désynchroniser.avec.la.mise.en.page..Dans.l’exemple.précédent,.au.lieu.d’attribuer.
la.classe.rouge.aux.notifications,.vous.pouvez.leur.donner.un.nom.plus.descriptif,.comme.
.avertissement.ou..notification.(voir.Figure 1.4)..L’aspect.le.plus.intéressant.des.noms.
descriptifs.tient.à.ce.que.vous.pouvez.les.utiliser.dans.tout.le.site..Par.exemple,.vous.pouvez.
aussi.utiliser.la.classe..notification.avec.d’autres.types.de.messages.et.leur.attribuer.un.
style.complètement.différent.en.fonction.de.l’endroit.où.ils.se.trouvent.dans.le.document..
Figure 1.4
Bons et mauvais noms d’ID.
Mauvais noms
rouge
colonneGauche
navHaut
premierPara
Bons noms
erreur
contenuSecondaire
navPrincipale
intro
Lorsque.vous.écrivez.des.noms.de.classe.et.d’ID,.soyez.attentif.à.la.casse,.car.les.navigateurs.considèrent.que..nimportequi.est.une.autre.classe.que..nimporteQui..Le.meilleur.
moyen.de.gérer.ce.problème.consiste.à.respecter.systématiquement.la.même.convention.de.
nom..Pour.ma.part,.j’écris.tous.mes.noms.d’ID.et.de.classes.en.minuscules,.avec.des.tirets.
pour.séparer.les.mots..C’est.une.écriture.plus.lisible..nimporte-qui.est.ainsi.plus.lisible.
que.nimporteQui.
ID ou classes ?
Il.est.parfois.difficile.de.savoir.si.un.élément.doit.posséder.un.ID.ou.un.nom.de.classe..En.
règle.générale,.les.classes.doivent.s’appliquer.aux.éléments.de.nature.similaires,.qui.peuvent.apparaître.à.plusieurs.endroits.dans.la.même.page,.alors.que.les.ID.doivent.s’appliquer.
aux.éléments.uniques..Reste.dès.lors.à.savoir.quels.éléments.sont.par.nature.similaires.et.
lesquels.sont.uniques.