CSS : Eviter les redondances

Il arrive souvent que des mêmes attributs se recoupent d’une classe à l’autre dans notre feuille de style. Pourquoi les répéter dans chaque classe alors qu’on pourrait simplement préciser deux classes (ou plus) à notre bloc div : les informations générales et communes à plusieurs bloc ainsi que les propriétés spécifiques à l’élément en question.

Mon CSS :

.monBloc {
padding: 5px;
font-weight: bold;
text-decoration: underline;
}

.rouge {
color: #f00;
}

.vert {
color: #0f0;
}

Mon code HTML :

<div class="monBloc">Mon texte gras et souligné affecté de mon padding</div>
<div class="monBloc rouge">Mon texte gras, souligné et rouge affecté de mon padding</div>
<div class="monBloc vert">Mon texte gras, souligné et vert affecté de mon padding</div>

Nous avons ainsi évité de répéter le padding, le gras et le soulignement dans les deux classes rouge et vert. On gagne en lisibilité lors de la rédaction ainsi que de la relecture en facilitant la maintenabilité du code.

Baptiste Simon aka TiChou

Ingénieur développeur web dans le secteur du e-commerce et du tourisme mais avant toute chose passionné par internet et ses intarissables ressources.

Les commentaires sont fermés

Partenaires et blog à la une