A Logical Approach to Naming SASS Variables and CSS Classes

It’s good to have some naming conventions that are flexible and future proof. Here are some of the ways I like to keep things forward thinking when planning a project. Being too specific about naming SASS variables and class names can cause you problems down the line. This is particularly important for when you plan to change a website’s brand colours down the line.

The problem

If you’ve worked on anything with a number of colours, you will have found yourself creating variables to define your palette. This obviously saves you the trouble of manually re-using hex codes all over the place. But there are a few different ways you could go about it, and it depends on how important future proofing your site is.

Option 1: Name them based on a unique colour

One method I’ve used before is to name every hex code as something unique. There are a few websites that help you do this, such as: https://www.color-name.com

So if I had a range of colours on a website, I could use this tool and set them up as follows:

$deep-koamaru:  #392c70;
$mustard-green: #63702C;
$boy-red:       #70674d;
$catawba:       #70384d;

The good thing about this approach is that you’ll never need to come up with colour names, every one you use will be unique. However, they might be hard to remember if you use them a lot. Some could be quite obscure and don’t accurately describe what the colour is. If you wanted to change a colour, you may have to create a brand new variable, which is not ideal if you just wanted to change a colour scheme. It also could become a headache for class names:

.btn-deep-koamaru

Ugh! Not great.

Option 2: Generic names based on colour hierarchy

This method makes use of the order of things. For example when you have a primary colour, a secondary colour etc. This offers more flexibility for when you want to change colours down the line, or plan to create different themes with different colours. The variables could look like this:

$primary:   #392c70;
$secondary: #63702C;
$tertiary:  #70674d;
$highlight: #70384d;

This is great, and would work well with applying classes, but could be better. The list could get quite long if you wanted to add other colours like complementary colours, a set of greys, varying shades of primary colour. Designers like their colours, right? There is however, another option that can speed up the whole process of creating a colour palette;

Option 3: Generic names in a sass map

The great thing about naming SASS variables this way, is that you can group them into similar colours. It allows you to have a much bigger palette of colours, and gives you the power to loop through the SASS map to create your CSS classes on the fly. Take a look at this example:

$colour-map: (
  primary: (
    base: #colour,
    contrast: #colour,
    dark: #colour
  ),
  secondary: (
    base: #colour,
    contrast: #colour,
    dark: #colour,
  )
);

With a map it makes it easy to create classes for things like buttons etc. You could then get the colour you needed like so:

.color {
    color: map.get($colour-map, primary, base); //#color
}

Note that the use of map.get relies on the newer dart-sass, not libsass. For this you will also need to include this at the top of your sass file:

@use 'sass:map';

It’s possible to also iterate over the map and return, say a group of different styles for a series of buttons. However that’s something I’m currrently exploring, and may write about in a future article. Sassmeister.com is a useful tool I use for playing around with SASS, which I talk about in my article: The Essential Web Development Tools and Resources I need