Color Variables

All of your colors for the site’s branding and color scheme go into the utility variables module. You assign the color to a variable and then use the variable within your styles. The advantage is: for each project, you have just one place to change the entire site’s branding. It will save you time and frustrations. Bam, that’s a great thing!

In this episode, you’ll think about different variable naming strategies. You hear me walking through various alternatives until we find the one that seems to work better than the others. But like PHP variable naming, you have flexibility to name it what you want by what makes sense to you. I’m helping you to think about the process and the why of it.

Credit: Jackie D’Elia and I were chatting. She convinced me to change how I name colors, i.e. from the color itself to component based. For example, I used to do an $orange which then I used everywhere. Ok, but then when I switch to a new project or site, I have to change those when the color palette changes. That’s not smart. So in this episode, I’m showing you how to name by component with this naming convention $primaryNav__BackgroundColor.