How to give CSS Colour Variables Awesome Names!
Naming things is hard. 😩
But you already knew that. Remember that one time when you added a few boxes to your web app and created a couple CSS variables to describe the new colours you used?
$primary-border: #888888;
$light-green: #98FB98;.boxes {
border: 1px solid $primary-border;
background-color: $light-green;
}
💥 Awesome. Now when we need to modify those colours we only need to do it in one place and they will update across the app.
But then the next spec comes down the pipe, and… oh, this new submit button’s disabled state is also #888888. Hmm.
Issue 1: Naming colours based on their function doesn’t scale.
That same submit button’s active colour is a lighter shade of green than $light-green, so the next variable name should be… $lighter-green? And in the future, $lightest-green? and then, uhh…
Issue 2: Naming colours based on their appearance won’t scale.
So, here’s one possible solution that’s as fun as it is practical — give CSS colour variables a unique name. You could invent your own ($taxi-cab-yellow) or you could use one of the many names that already exist for CSS colours.
In the screenshot above, I’m using an application called Sip (OSX and iPhone) which gives you a colour picker that magnifies the area you’d like to sample a colour from and automatically gives it a name. 🚀 Very cool.
You could also use a tool like Name That Colour to help give names to the HEX values of the colours in your project.
I find that using named colours is a lot more interesting, inspiring, and memorable. Also, when and if you still find yourself in a situation where you’d like to reference a colour’s appearance or function, you can always alias that colour:
$fire-brick-red: #B22222;
$error-dialog-border: $fire-brick-red;Finally, you’ll want to centralize all of your colours in a colours.sass file (or whichever pre-processor you use). If you’re working on a team, it’s also a useful step to add the colours to a commonly accessible style guide. At 7Geese we use LESS, and have a page in our internal style guide that looks like this:
🎨 👌🏻 If you’re wondering about the different grey variables listed above, the number on the end of each name refers to opacity (and it’s spelled that way because we’re in 🇨🇦😄).
If you have any other ideas for managing colours or any other part of the app building workflow, I’d love to hear about it. Leave a note in the comments below!
If you like building cool things, collaborating with a super talented team, and want to work at a company with a great culture, 7Geese is hiring.
