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.