####There are only two hard things in Computer Science…

I’ve had some trouble figuring out a good way to name variables in our SASS sheets. Our original code followed this kind of pattern:

$color1: #000;

.my_class {
    background-color: $color1;
	// ... "immutable" styles ...
}

.my_other_class {
    background-color: $color1;
    // ... "immutable" styles ...
}

So that follows the DRY principle. Declare the hex code once and use it in all the places you need it. That solves a problem, yay!

But what if there are a ton of selectors and variables between the $color1 declaration and the selectors that use it? It is now really hard to keep track of what uses what. In our big app, this has been a headache to maintain.

So perhaps I could name $color1 to something that makes a bit more sense. like $black, or $blue, or whatever. The problem with this approach is that I’m making many themeable stylesheets. So in one theme I might have the bg color for my_class and my_other_class be black, but in another theme I could want it to be white. I can’t think of a more infuriating line of SASS code like $black = #FFF - Ugh! That’s sure to become confusing quickly.

So I need some more semantically-relevant names. Something like $table_header_color. Now that’s something useful. Now I can have some nicer code that looks like:

$body_bg_color: #FFF;
$main_font_color: #000;
$table_header_color: #123123;
$table_header_background_color: #321321;

body {
    // ... "immutable" styles ...
    color: $main_font_color;
    background-color: $body_bg_color;
    // ... "immutable" styles ...
}

.tableheader {
    // ... "immutable" styles ...
    $table_header_color;
    background-color: $table_header_background_color;
    // ... "immutable" styles ...
}

This is a trivial example and in reality, it is a lot of work figuring out exactly what variables are needed. However, after accomplishing a more semantic naming convention, I can more rapidly develop new themes because all my variables make more sense. On top of that, devs that see these SASS sheets down the road will be able to figure out what’s going on much more quickly. Woot!