Reducing your CSS by redusing repetive code
Repetitive code easily causes issues, more work and bloated code. But there's an easy approach to reduce receptive code, while still keeping the functionality
HTML code
We've all been there, we want to implement a feature on multiple areas where 99% of the code is the same and only change example the color part
[snippet]<header class="medblue">[/snippet]
In your HTML, you have an function with a class or id, that you want to adjust and add a color too
Quick and dirty CSS
Then one quickly might end up just re-writing the same code over and over again, but only changing the colour part
[snippet]#article-page > header.primary img, .article-card.primary img{ border-bottom:4px solid var(--primary);vertical-align:bottom;}
#article-page > header.secondary img, .article-card.secondary img{ border-bottom:4px solid var(--secondary);vertical-align:bottom;}
#article-page > header.black img, .article-card.black img{ border-bottom:4px solid var(--black);vertical-align:bottom;}
#article-page > header.brown img, .article-card.brown img{ border-bottom:4px solid var(--brown);vertical-align:bottom;}
#article-page > header.darkgreen img, .article-card.darkgreen img{ border-bottom:4px solid var(--greendark);vertical-align:bottom;}
#article-page > header.darkgray img, .article-card.darkgray img{ border-bottom:4px solid var(--darkgray);vertical-align:bottom;}
#article-page > header.seagreen img, .article-card.seagreen img{ border-bottom:4px solid var(--seagreen);vertical-align:bottom;}
#article-page > header.darkblue img, .article-card.darkblue img{ border-bottom:4px solid var(--darkblue);vertical-align:bottom;}
#article-page > header.darkcyan img, .article-card.darkcyan img{ border-bottom:4px solid var(--darkcyan);vertical-align:bottom;}
#article-page > header.darkred img, .article-card.darkred img{ border-bottom:4px solid var(--darkred);vertical-align:bottom;}
#article-page > header.darkyellow img,.article-card.darkyellow img{ border-bottom:4px solid var(--darkyellow);vertical-align:bottom;}
#article-page > header.darkorange img,.article-card.darkorange img{ border-bottom:4px solid var(--darkorange);vertical-align:bottom;}
#article-page > header.lightblue img, .article-card.lightblue img{ border-bottom:4px solid var(--lightblue);vertical-align:bottom;}
#article-page > header.pink img, .article-card.pink img{ border-bottom:4px solid var(--pink);vertical-align:bottom;}
#article-page > header.darkgrey img, .article-card.darkgrey img{ border-bottom:4px solid var(--darkgrey);vertical-align:bottom;}
#article-page > header.medblue img, .article-card.medblue img{ border-bottom:4px solid var(--medblue);vertical-align:bottom;}[/snippet]
It will work, but it also make the CSS more bloated and also requires you to update all fields when you want to adjust on of the other parameters that should always be the same for all
Improved minified CSS
If you instead take some time and define each class/id as it's own color variable. Here we have called it --color-class-selected
[snippet]/* GENERAL->Class Colours */
.primary{--color-class-selected:var(--primary);}
.secondary{--color-class-selected:var(--secondary);}
.black{--color-class-selected:var(--black);}
.brown{--color-class-selected:var(--brown);}
.darkgreen{--color-class-selected:var(--greendark);}
.darkgray{--color-class-selected:var(--darkgray);}
.seagreen{--color-class-selected:var(--seagreen);}
.darkblue{--color-class-selected:var(--darkblue);}
.darkcyan{--color-class-selected:var(--darkcyan);}
.darkred{--color-class-selected:var(--darkred);}
.darkyellow{--color-class-selected:var(--darkyellow);}
.darkorange{--color-class-selected:var(--darkorange);}
.lightblue{--color-class-selected:var(--lightblue);}
.pink{--color-class-selected:var(--pink);}
.darkgrey{--color-class-selected:var(--darkgrey);}
.medblue{--color-class-selected:var(--medblue);}[/snippet]
Then we later can call on these colors in different segments of the CSS
[snippet]/* Calling on the colour classes */
h1::after{content:"";display:block;height:7px;width:75px;background-color:#d7003c;z-index:-2;background:var(--color-class-selected);}
object > a{background:var(--color-class-selected);top:-11px;position:relative;border-radius:5px;}
#article-page > header img, .article-card img{border-bottom:4px solid var(--color-class-selected);vertical-align:bottom;}[/snippet]
Now different areas will get their own color, depending on css/id class being called in the HTML code and linked using the variable --color-class-selected
Tags: #MinifyCSS
