37
Des styles qui atteignent leur cible
fichier.recherchée..Dans.l’exemple.suivant,.la.recherche."@group.typ".amène.à.la.section.
de.typographie.de.la.feuille.de.styles :
/* @group typographie */
Si.vous.utilisez.l’éditeur.OS X.CSS.Edit,.cette.convention.est.utilisée.comme.moyen.simple.
mais.efficace.de.naviguer.dans.les.feuilles.de.styles.
Structuration du code
Il.est.judicieux.de.décomposer.les.feuilles.de.styles.en.blocs.cohérents.afin.d’en.faciliter.la.
maintenance..Chez.Clearleft,.nous.commençons.généralement.par.les.styles.les.plus.généraux,.comme.ceux.qui.sont.appliqués.à.la.balise.body.et.qui.doivent.être.hérités.par.tous.les.
éléments.du.site..Ensuite,.viennent.les.redéfinitions.globales,.puis.les.liens,.les.titres.et.les.
autres.éléments..
Une.fois.les.styles.généraux.établis,.nous.devenons.un.peu.plus.précis.et.traitons.les.styles.
utilitaires..Il.s’agit.de.classes.générales.utilisées.dans.tout.le.site,.par.exemple.pour.les.formulaires.et.les.messages.d’erreur..Nous.passons.ensuite.aux.éléments.structurels,.comme.la.
mise.en.page.et.la.navigation.
À.mesure.que.nous.avançons.dans.la.feuille.de.styles,.nous.étageons.progressivement.les.
styles.les.uns.au-dessus.des.autres,.en.gagnant.chaque.fois.en.spécificité..Quand.les.éléments.d’architecture.de.la.page.sont.traités,.nous.passons.aux.composants.propres.à.chaque.
page..Pour.finir,.nous.incluons.toutes.les.redéfinitions.et.les.exceptions.en.bas.du.document,.
lequel.présente.finalement.la.structure.suivante :
•. Styles.généraux
. –. Styles.body.
. –. Redéfinitions
. –. Liens
. –. Titres
. –. Autres.éléments
•. Styles.utilitaires
. –. Formulaires.
. –. Notifications.et.erreurs.
. –. Éléments.répétitifs.
•. Structure.de.page
. –. Titres,.pieds.de.page.et.navigation
. –. Mise.en.page.
. –. Autres.blocs.de.page
Des styles qui atteignent leur cible
fichier.recherchée..Dans.l’exemple.suivant,.la.recherche."@group.typ".amène.à.la.section.
de.typographie.de.la.feuille.de.styles :
/* @group typographie */
Si.vous.utilisez.l’éditeur.OS X.CSS.Edit,.cette.convention.est.utilisée.comme.moyen.simple.
mais.efficace.de.naviguer.dans.les.feuilles.de.styles.
Structuration du code
Il.est.judicieux.de.décomposer.les.feuilles.de.styles.en.blocs.cohérents.afin.d’en.faciliter.la.
maintenance..Chez.Clearleft,.nous.commençons.généralement.par.les.styles.les.plus.généraux,.comme.ceux.qui.sont.appliqués.à.la.balise.body.et.qui.doivent.être.hérités.par.tous.les.
éléments.du.site..Ensuite,.viennent.les.redéfinitions.globales,.puis.les.liens,.les.titres.et.les.
autres.éléments..
Une.fois.les.styles.généraux.établis,.nous.devenons.un.peu.plus.précis.et.traitons.les.styles.
utilitaires..Il.s’agit.de.classes.générales.utilisées.dans.tout.le.site,.par.exemple.pour.les.formulaires.et.les.messages.d’erreur..Nous.passons.ensuite.aux.éléments.structurels,.comme.la.
mise.en.page.et.la.navigation.
À.mesure.que.nous.avançons.dans.la.feuille.de.styles,.nous.étageons.progressivement.les.
styles.les.uns.au-dessus.des.autres,.en.gagnant.chaque.fois.en.spécificité..Quand.les.éléments.d’architecture.de.la.page.sont.traités,.nous.passons.aux.composants.propres.à.chaque.
page..Pour.finir,.nous.incluons.toutes.les.redéfinitions.et.les.exceptions.en.bas.du.document,.
lequel.présente.finalement.la.structure.suivante :
•. Styles.généraux
. –. Styles.body.
. –. Redéfinitions
. –. Liens
. –. Titres
. –. Autres.éléments
•. Styles.utilitaires
. –. Formulaires.
. –. Notifications.et.erreurs.
. –. Éléments.répétitifs.
•. Structure.de.page
. –. Titres,.pieds.de.page.et.navigation
. –. Mise.en.page.
. –. Autres.blocs.de.page