Maintenant que tout le monde (ou presque) utilise les CSS, il peut être utile de voir comment regrouper (ou factoriser) les styles de votre site pour mieux les retravailler ensuite.
L’idée est de regrouper les éléments qui peuvent l’être (par exemple l’utilisation d’ombres sur plusieurs boites et d’une couleur de fond) pour à la fois réduire votre fichier de style et aussi pouvoir modifier le design de votre site plus rapidement. Il s’agit donc d’un petit article destiné avant tout aux débutants. Mais certains web designer et intégrateurs pourraient bien apprendre des petites choses aussi…
Mais plutôt qu’un long discours, passons à la pratique et intéressons nous à ces définitions :
/* Ces trois "boîtes" ont des éléments en commun */
.boite1 {
width:200px;
height:200px;
background-color:#000000;
color:#FFFFFF;
}
.boite2 {
width:600px;
height:100px;
padding:10px;
background-color:#000000;
color:#FFFFFF;
}
.boite3 {
width:540px;
height:410px;
margin:0 auto;
padding:5px;
background-color:#000000;
color:#FFFFFF;
}
Comme vous le constatez, nous définissons bout chaque élément la couleur de fond et la couleur du texte. Mais que se passe-t-il si nous décidons plus tard de modifier ces couleurs ? Nous sommes alors obligé de modifier les 3 styles des éléments. Il serait donc plus simple de regrouper les informations concernant les couleurs dans une classe CSS.
Si on regroupe les informations voici ce qu’on obtient :
/* on créée une nouvelle classe pour la couleur */
.boite1 {
width:200px;
height:200px;
}
.boite2 {
width:600px;
height:100px;
padding:10px;
}
.boite3 {
width:540px;
height:410px;
margin:0 auto;
padding:5px;
}
.couleur {
background-color:#000000;
color:#FFFFFF;
}
Nous avons donc bien regroupé dans notre fichier CSS mais comment appliquer ces couleurs dans le document html ? Et bien, c’est très simple, il suffit d’ajouter plusieurs classes aux éléments, comme le montre le code HTML ci-dessous :
<div class="boite1 couleur">
<p>Mon texte</p>
</div>
<div class="boite2 couleur">
<p>Mon texte</p>
</div>
<div class="boite3 couleur">
<p>Mon texte</p>
</div>
Et voilà, le tour est joué !
Cet article a été inspiré par le framework CSS – en fait une grille CSS – Blueprint CSS qui utilise ce principe avec beaucoup d’efficacité.