Hi, I am interested to know what naming conventions people are using or recommend for css colour variables.
Colour names
Looking at various sources it seems a popular scheme is to use colour names a bit like this one.
:root {
--clr-crimson-300: hsl(348, 83%, 36%);
--clr-crimson-500: hsl(348, 83%, 45%);
--clr-crimson-700: hsl(348, 83%, 54%);
--clr-crimson-900: hsl(348, 83%, 63%);
--clr-brown-300: hsl(10, 5%, 25%);
...
}
.some-section {
background-color: var(--clr-crimson-500);
}
Here Kevin Powell is using a similar setup to font weights, with 500 being the base colour, higher numbers being heavier darker shades and smaller numbers being lighter shades.
This makes sense to me if you are working from a set colour palette or branding.
Drawback
A potential issue I see is if a request is put in to update a colour, say crimson to orange, you will have to update variable names, their values and all occurences throughout the style sheets.
:root {
/* all need to be changed */
--clr-orange-300: hsl(31, 80%, 36%);
--clr-orange-500: hsl(31, 80%, 45%);
--clr-orange-700: hsl(31, 80%, 54%);
--clr-orange-900: hsl(31, 80%, 63%);
--clr-brown-300: hsl(10, 5%, 25%);
...
}
.some-section {
/* changed here too */
background-color: var(--clr-orange-500);
}
Generic names
I’m thinking along the lines of primary, secondary, accent etc. This seems to make more sense to me.
/* SASS variables */
$clr-primary: hsl(348, 83%, 45%);
:root {
--clr-primary-300: #{lighten($clr-primary, 10%)};
--clr-primary-500: #{$clr-primary};
--clr-primary-700: #{darken($clr-primary, 10%)};
--clr-primary-900: #{darken($clr-primary, 20%)};
}
.some-section {
background-color: var(--clr-primary-500);
}
Here I am using SASS variables. If I need or want to change a colour I only need to change the colours in one place e.g. change the value of $clr-primary from crimson to orange. All the shades will be updated accordingly.
/* Only need to change this line */
$clr-primary: hsl(31, 80%, 45%);
/* The rest stays the same */
:root {
--clr-primary-300: #{lighten($clr-primary, 10%)};
--clr-primary-500: #{$clr-primary};
--clr-primary-700: #{darken($clr-primary, 10%)};
--clr-primary-900: #{darken($clr-primary, 20%)};
}
.some-section {
background-color: var(--clr-primary-500);
}
Drawback
SASS/SCSS is a bit behind CSS and it’s newer features. Certainly in codepen if you try to use attr() types e.g. attr(data-width type(<percentage>)) you will get a syntax error. I don’t know if there is a work around, but this could be limiting.
Off topic a bit: Vanilla CSS Version of lighten() or darken()?
I did try to replicate this functionality in vanilla CSS. You can mimik it to an extent with the color() function and calc() or with the colour-mix() function mixing with white or black.
As far as I can tell though, SASS lighten and darken work with luminance values. lighten(hsl(31, 80%, 45%), 10%) is equivalent to an addition e.g. hsl(31, 80%, 55%) and matching this through calculation seems to be overly complicated if not impossible.
Conclusion
Yes so people’s thoughts on this topic. Work works and doesn’t work? Recommendations?
(although I can see the usefulness of perhaps a few standard utility classes)