12
Maîtrise des CSS
Par. exemple,. imaginez. que. votre. site. contienne. un. système. de. navigation. principal. dans.
l’en-tête,.un.système.de.navigation.paginé.en.bas.de.la.page.des.résultats.de.recherche.et.un.
troisième.système.de.navigation.dans.le.pied.de.page..Allez-vous.donner.à.chacun.de.ces.éléments.un.ID.distinct,.comme.main-nav,.page-nav.et.footer-nav.ou.allez-vous.attribuer.à.
chacun.la.classe.nav.et.les.mettre.en.forme.en.fonction.de.leur.position.dans.le.. document ?.
Auparavant,.j’avais.plutôt.tendance.à.préférer.la.première.méthode,.qui.me.paraissait.offrir.
un.ciblage.plus.défini..Malheureusement,.elle.présente.aussi.des.désavantages..Que.se.passet-il.si.vous.décidez.finalement.d’afficher.le.système.de.navigation.paginé.à.la.fois.en.haut.et.
en.bas.des.résultats.de.la.recherche.ou.que.vous.souhaitiez.créer.un.système.de.navigation.à.
deux.niveaux.dans.le.pied.de.page ?
Si.vous.utilisez.beaucoup.d’ID,.vous.serez.rapidement.à.court.de.noms.et.vous.finirez.par.
développer.des.conventions.de.noms.extrêmement.longues.et.compliquées..C’est.pour.cette.
raison.que.je.privilégie.aujourd’hui.les.noms.de.classes.et.n’emploie.un.ID.que.lorsque.je.
cible.un.élément.très.spécifique.et.que.je.ne.risque.jamais.de.me.resservir.de.ce.nom.pour.
autre.chose.autre.part.dans.le.site..Vous.ne.devez.en.fait.utiliser.un.ID.que.lorsque.vous.avez.
la.certitude.que.l’élément.n’apparaîtra.qu’une.seule.fois..Si.vous.envisagez.d’employer.des.
éléments.similaires.à.l’avenir,.préférez.plutôt.une.classe..En.vous.en.tenant.à.des.conventions.de.noms.générales.et.en.utilisant.des.classes,.vous.éviterez.de.créer.de.longues.chaînes.
de.sélecteurs.d’ID.qui.renvoient.toutes.à.des.styles.similaires.
#andy, #rich, #jeremy, #james-box, #cennydd, #paul, #natalie, #sophie {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}
Il suffit alors de créer une classe générique pour l’ensemble.
.staff {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}
Grâce.à.leur.flexibilité,.les.classes.peuvent.être.d’une.redoutable.efficacité..En.contrepartie,.
on.peut.aussi.facilement.en.abuser..Bien.souvent,.les.débutants.en.CSS.en.ajoutent.à.tout.ce.
qu’ils.rencontrent,.afin.de.pouvoir.contrôler.aussi.précisément.que.possible.leurs.styles..Les.
premiers.éditeurs.WYSIWYG.avaient.également.tendance.à.ajouter.des.classes.chaque.fois.
qu’un.style.était.appliqué..De.nombreux.développeurs.ont.contracté.cette.mauvaise.habitude,.parce.qu’ils.ont.appris.les.CSS.en.observant.le.code.généré.par.les.logiciels..C’est.ce.
qu’on.appelle.une."classite.aiguë" ;.c’est.presque.aussi.mauvais.que.la.manie.de.tableaux,.
car.cela.a.pour.effet.d’ajouter.du.code.dépourvu.de.signification.au.document.
Dans.cet.exemple,.on.identifie.chaque.élément.comme.partie.d’un.article.de.news.en.utilisant.un.nom.de.classe.lié.aux.news..Le.but.ici.est.de.faire.en.sorte.que.les.titres.et.le.texte.
Maîtrise des CSS
Par. exemple,. imaginez. que. votre. site. contienne. un. système. de. navigation. principal. dans.
l’en-tête,.un.système.de.navigation.paginé.en.bas.de.la.page.des.résultats.de.recherche.et.un.
troisième.système.de.navigation.dans.le.pied.de.page..Allez-vous.donner.à.chacun.de.ces.éléments.un.ID.distinct,.comme.main-nav,.page-nav.et.footer-nav.ou.allez-vous.attribuer.à.
chacun.la.classe.nav.et.les.mettre.en.forme.en.fonction.de.leur.position.dans.le.. document ?.
Auparavant,.j’avais.plutôt.tendance.à.préférer.la.première.méthode,.qui.me.paraissait.offrir.
un.ciblage.plus.défini..Malheureusement,.elle.présente.aussi.des.désavantages..Que.se.passet-il.si.vous.décidez.finalement.d’afficher.le.système.de.navigation.paginé.à.la.fois.en.haut.et.
en.bas.des.résultats.de.la.recherche.ou.que.vous.souhaitiez.créer.un.système.de.navigation.à.
deux.niveaux.dans.le.pied.de.page ?
Si.vous.utilisez.beaucoup.d’ID,.vous.serez.rapidement.à.court.de.noms.et.vous.finirez.par.
développer.des.conventions.de.noms.extrêmement.longues.et.compliquées..C’est.pour.cette.
raison.que.je.privilégie.aujourd’hui.les.noms.de.classes.et.n’emploie.un.ID.que.lorsque.je.
cible.un.élément.très.spécifique.et.que.je.ne.risque.jamais.de.me.resservir.de.ce.nom.pour.
autre.chose.autre.part.dans.le.site..Vous.ne.devez.en.fait.utiliser.un.ID.que.lorsque.vous.avez.
la.certitude.que.l’élément.n’apparaîtra.qu’une.seule.fois..Si.vous.envisagez.d’employer.des.
éléments.similaires.à.l’avenir,.préférez.plutôt.une.classe..En.vous.en.tenant.à.des.conventions.de.noms.générales.et.en.utilisant.des.classes,.vous.éviterez.de.créer.de.longues.chaînes.
de.sélecteurs.d’ID.qui.renvoient.toutes.à.des.styles.similaires.
#andy, #rich, #jeremy, #james-box, #cennydd, #paul, #natalie, #sophie {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}
Il suffit alors de créer une classe générique pour l’ensemble.
.staff {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}
Grâce.à.leur.flexibilité,.les.classes.peuvent.être.d’une.redoutable.efficacité..En.contrepartie,.
on.peut.aussi.facilement.en.abuser..Bien.souvent,.les.débutants.en.CSS.en.ajoutent.à.tout.ce.
qu’ils.rencontrent,.afin.de.pouvoir.contrôler.aussi.précisément.que.possible.leurs.styles..Les.
premiers.éditeurs.WYSIWYG.avaient.également.tendance.à.ajouter.des.classes.chaque.fois.
qu’un.style.était.appliqué..De.nombreux.développeurs.ont.contracté.cette.mauvaise.habitude,.parce.qu’ils.ont.appris.les.CSS.en.observant.le.code.généré.par.les.logiciels..C’est.ce.
qu’on.appelle.une."classite.aiguë" ;.c’est.presque.aussi.mauvais.que.la.manie.de.tableaux,.
car.cela.a.pour.effet.d’ajouter.du.code.dépourvu.de.signification.au.document.
Andy wins an Oscar for his cameo in Iron Man
Andy Budd wins the Oscar for best supporting actor in Iron Man
after his
„ surprise cameo sets Hollywood a twitter with speculation.
Dans.cet.exemple,.on.identifie.chaque.élément.comme.partie.d’un.article.de.news.en.utilisant.un.nom.de.classe.lié.aux.news..Le.but.ici.est.de.faire.en.sorte.que.les.titres.et.le.texte.