Pardon me for my beginner question. Is there a way to consolidate the following example?
Example:
.mainnavbar {
color: #333333;
}
.footerarea {
background: #333333;
}
.extracontents {
border: 0.2rem #333333 solid;
}
#333333 appears in all three declarations, and I'm afraid it is considered redundant. I know Sass and CSS Variables allow me to define the color once and reuse elsewhere, but I would rather not use them for some reasons. I wonder whether I could consolidate them without resorting to SASS or CSS Variables?
I wouldn't do anything more than change them from #333333 to #333... why?
1) you might change your mind and want them different colours.
2) because the colours are assigned to different attributes on different elements, anything you do to it is going to be more code.
See nonsense like HTML/CSS "frameworks" that make you use two to ten times the HTML needed to do the job; or CSS pre-processors (LESS/SASS/SCSS) that result in writing as much if not more code than you'd have without it that then results in twice the CSS on deployment! Yet then the fanboys make wild unfounded claims these train wrecks of how not to use HTML or CSS make the process easier, or simpler, or "aids in collaboration" or some other made up fairy tale not based in anything remotely resembling reality.
No matter what anyone tells you more code is rarely simpler or easier. Two to ten times the code? Forget it.
Bottom line, that's as simple as it gets. You want to change them en-masse search/replace in your editor is your friend.
Before we figure out what tool might help, can you provide an example of how you think these could be consolidated? None of these rules share any declarations so it seems as simple as it can be made.
If I understood you, as for CSS variables, use root:
:root
{
--main-color = #333;
}
.mainnavbar
{
color: var(--main-color);
}
.footerarea
{
background: var(--main-color);
}
.extracontents
{
border: 0.2rem var(--main-color) solid;
}
Hanah Steven
Emil Moe
Senior Data Engineer
I don't see how you can simplify it more, however you can shorten your hex code. Not a big saving though.
.mainnavbar { color: #333; } .footerarea { background: #333; } .extracontents { border: 0.2rem #333 solid; }