13
Les fondations
possèdent.un.style.différent.du.reste.de.la.page,.mais.il.n’est.pas.nécessaire.d’utiliser.toutes.
ces.classes.supplémentaires.pour.cibler.chaque.élément.individuel..Vous.pouvez.identifier.
l’ensemble.du.bloc.comme.un.élément.de.news.en.le.plaçant.dans.une.div.(du.code).portant.
le.nom.de.classe.news..Ensuite,.les.titres.ou.le.texte.peuvent.être.ciblés.grâce.aux.propriétés.
de.cascade.des.feuilles.de.styles.
Chaque.fois.que.vous.vous.retrouvez.à.répéter.des.mots.dans.les.noms.de.classes.(comme.
news-head.et.news-link.ou.section-head.et.section-foot),.demandez-vous.si.ces.éléments.ne.peuvent.pas.être.décomposés.en.leurs.parties.constituantes..Votre.code.serait.alors.
mieux.décomposé.et.donc.plus.flexible.
En.supprimant.les.classes.superflues,.vous.simplifierez.le.code.et.réduirez.le.poids.de.vos.pages..
Je.reviendrai.sous.peu.sur.les.sélecteurs.CSS.et.le.ciblage.des.styles,.mais.il.n’est.presque.jamais.
nécessaire.de.dépendre.à.ce.point.des.noms.de.classes..Si.vous.ajoutez.un.grand.nombre.de.
classes,.c’est.sans.doute.le.signe.que.votre.document.HTML.est.mal.structuré.
div et span
L’élément.div.est.l’un.des.premiers.qui.puisse.contribuer.à.donner.une.structure.aux.documents..De.nombreuses.personnes.pensent.–.à.tort.–.que.l’élément.div.ne.possède.pas.de.
signification..La.balise.div.marque.pourtant.une.division.et.fournit.un.moyen.de.décomposer.les.documents.en.zones.bien.définies..En.plaçant.la.zone.de.contenu.principal.dans.
une.div.et.en.lui.attribuant.la.classe.content,.vous.structurez.votre.document.de.manière.
sémantique.
Pour.limiter.le.plus.possible.le.balisage,.vous.ne.devez.utiliser.d’élément.div.que.lorsqu’il.
n’existe.pas.déjà.un.élément.distinctif..Par.exemple,.si.vous.vous.servez.d’une.liste.pour.
votre.navigation.principale,.il.n’est.pas.nécessaire.de.l’envelopper.dans.une.div.
Vous.pouvez.supprimer.la.div.et.appliquer.votre.classe.directement.à.la.liste :
Les fondations
possèdent.un.style.différent.du.reste.de.la.page,.mais.il.n’est.pas.nécessaire.d’utiliser.toutes.
ces.classes.supplémentaires.pour.cibler.chaque.élément.individuel..Vous.pouvez.identifier.
l’ensemble.du.bloc.comme.un.élément.de.news.en.le.plaçant.dans.une.div.(du.code).portant.
le.nom.de.classe.news..Ensuite,.les.titres.ou.le.texte.peuvent.être.ciblés.grâce.aux.propriétés.
de.cascade.des.feuilles.de.styles.
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.
Chaque.fois.que.vous.vous.retrouvez.à.répéter.des.mots.dans.les.noms.de.classes.(comme.
news-head.et.news-link.ou.section-head.et.section-foot),.demandez-vous.si.ces.éléments.ne.peuvent.pas.être.décomposés.en.leurs.parties.constituantes..Votre.code.serait.alors.
mieux.décomposé.et.donc.plus.flexible.
En.supprimant.les.classes.superflues,.vous.simplifierez.le.code.et.réduirez.le.poids.de.vos.pages..
Je.reviendrai.sous.peu.sur.les.sélecteurs.CSS.et.le.ciblage.des.styles,.mais.il.n’est.presque.jamais.
nécessaire.de.dépendre.à.ce.point.des.noms.de.classes..Si.vous.ajoutez.un.grand.nombre.de.
classes,.c’est.sans.doute.le.signe.que.votre.document.HTML.est.mal.structuré.
div et span
L’élément.div.est.l’un.des.premiers.qui.puisse.contribuer.à.donner.une.structure.aux.documents..De.nombreuses.personnes.pensent.–.à.tort.–.que.l’élément.div.ne.possède.pas.de.
signification..La.balise.div.marque.pourtant.une.division.et.fournit.un.moyen.de.décomposer.les.documents.en.zones.bien.définies..En.plaçant.la.zone.de.contenu.principal.dans.
une.div.et.en.lui.attribuant.la.classe.content,.vous.structurez.votre.document.de.manière.
sémantique.
Pour.limiter.le.plus.possible.le.balisage,.vous.ne.devez.utiliser.d’élément.div.que.lorsqu’il.
n’existe.pas.déjà.un.élément.distinctif..Par.exemple,.si.vous.vous.servez.d’une.liste.pour.
votre.navigation.principale,.il.n’est.pas.nécessaire.de.l’envelopper.dans.une.div.
Vous.pouvez.supprimer.la.div.et.appliquer.votre.classe.directement.à.la.liste :