I love looking at the color-metric pages of projects and I found a pattern while browsing through a bunch of projects. Many of them have multiple notations for the same color, like
rgb(0, 0, 0) that result in the same black color. I’m calling them aliases. I’m pretty sure that these aliases are not intentional, so keeping track of them may help us understand why they appear and how to fix them.
First, some examples to show you what I mean by aliases:
To my experience, this usually means one of the following things:
- Colors are not standardized in your codebase.
Projects like Tailwind and Bootstrap define all their colors in variables and use those variables in the rest of their codebase. As long as you use a variable for any color, it means that you’ll always use one of the predefined colors.
- Code isn’t minified at all or temporarily broken.
I’ve seen a couple of cases where websites started serving un-minified CSS, just by looking at their CSS colors. Where they just had
#000initially, they suddenly added
#000000too and the same for a lot more colors.
- A piece of CSS that you don’t control is loaded.
Very often a piece of CSS is loaded that belongs to a third party plugin or some advertiser. You probably can’t control the CSS that is in their source, so if they decide to use
#f00and you use
redinstead, there’s not a lot you can do.
- Colors are created dynamically.
Some developers have a list of base colors, like in the above example of Tailwind. To have a list of shades for every color they apply a transformation to the colors to darken, mix or saturate them. Most preprocessors like Sass, Styles or Less allow you to do something like
mix(#fff, #000, 50%). The resulting color might be a color that is already in your definitions, but in a different notation, depending on what the preprocessor decides is best.
No, they are not. As long as a browser can understand the different color notations and paint them on a screen, I don’t see why this could be harmful.
The most obvious benefit is that you can inspect your codebase outdated or unused pieces of CSS. A certain color notation could be used in only an old part of your application that could be removed entirely. Secondly, there is the tiniest benefit in compression of the CSS file if there are more common substrings. This benefit is negligible, so it should not trigger you to refactor your codebase to remove all aliases.
A good CSS minifier should be able to fix most or all aliases. A minifier like CSSNano parses all colors and tries to use shortest possible notation for each of them. The second option is to go to your project and manually ctrl/cmd + f your way through your CSS, but that’s probably not such a good idea. It will take a lot of time and the benefits will only be small.
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.
Extracting all CSS from a webpage involves more work than you might expect. Here's how Project Wallace does it.