If you used CSS analyzer tools e.g. CSS Analyzer by Project Wallace you may have noticed the relation between selector duplication and declaration duplication.
Let's say we want to apply a padding
of 1rem
to three different selectors then we have multiple choices:
Choice one: Repeat the declaration for all selectors
.selector1 {
/* other declarations */
padding: 1rem;
}
.selector2 {
/* other declarations */
padding: 1rem;
}
.selector3 {
padding: 1rem;
/* other declarations */
}
Result: Higher declaration duplication score and higher declarations per ruleset.
Choice two: Combine selectors that share the same declaration
.selector1,
.selector2,
.selector3 {
padding: 1rem;
}
.selector1 {
/* other declarations */
}
.selector2 {
/* other declarations */
}
.selector3 {
/* other declarations */
}
Result: lower declaration duplication but higher selector duplication.
Choice three: Using of utility classes
.padding-1rem {
padding: 1rem;
}
.selector1 {
/* other declarations */
}
.selector2 {
/* other declarations */
}
.selector3 {
/* other declarations */
}
Result: lower score of both selector and declaration duplications but it violates the Separation of concerns concept and we end up with markup like this:
<p class="padding-1rem margin-0 text-bold text-center etc">...</p>
which is not really good for maintainability.
So, as an experienced developer how you deal with this dilemma?