DEV Community

loading...

Alpha, Beta, Gamma naming convention

starbist profile image Silvestar Bistrović Originally published at silvestar.codes Updated on ・3 min read

My First Year of Freelancing<br>

This post was originally published on silvestar.codes.

A few months ago I started using Alpha, Beta, Gamma naming convention. It began as a temporary thing, but it stuck eventually, and now I am using it all the time.

Alpha, Beta, Gamma

I am using BEM on a daily basis. M stands for modifiers. A modifier represents a variation of an element, generally speaking.

One day, I had a great programming problem: how to name a thing, in my case, a modifier. I could not think of anything constructive, so I just wrote alpha. Then I created a new element modification, and named the new modifier beta.

When I got back to that particular code to update the names of the modifiers, I realized I like it this way. The names are clean and straightforward, and I knew which class I had to apply to modify the original element. The new naming convention was born.

Naming variables

After a while, I started using the same with Sass variables. Here is how color variables for my site look:

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;
Enter fullscreen mode Exit fullscreen mode

Why it works

What is great about using Alpha, Beta, Gamma naming convention is that it separates the context from an element. Also, [the Greek alphabet] is widely used, so the chances that you already know some characters are pretty high.

Let's say we have a list component with modifiers list--red, list--green, and list--blue for a list with red, green, and blue elements respectively. At some point, our designer decided to change the brand color from red to pink. Now we need to update the red color to pink, which means our modifier class name list--red wouldn't make sense anymore. We need to update the class name to list-pink. This situation is a classic problem in the world of CSS.

If we use Alpha, Beta, Gamma convention, we would have these three classes:

  • list--alpha,
  • list--beta, and
  • list--gamma.

Now we could modify the style as we please and our classes wouldn't lose meaning anymore.

Don't overuse it

There is a potential brain processing overhead here because you have to remember which letter stands for which version of an element. Try to reduce your brain usage by documenting your variables and modifiers and not using too many variations for a single component.

Use psi and omega to name different or completely distinct variables or modifiers.

Here's a tip for you: use psi and omega letters (last two letters of the alphabet) to name different or completely distinct variables or modifiers. For example, I am using color-psi for text color, and color-omega for white color. These are opposites of color-alpha, color-beta, and color-gamma which serves as theme/brand colors in my case.

Conclusion

Alpha, Beta, Gamma naming convention works for me, and I am using it on all new projects. I am quite sure I haven't invented it, I just wanted to share this approach with you and see what do you think about it.

Do you like this approach? Do you have a different naming convention that you want to share with the community? I would like to hear more about it. 💬

Discussion

pic
Editor guide
Collapse
david_j_eddy profile image
David J Eddy

One more than one occasion I have been called out for being over pedantic concerning naming things. For some reason I bike shed heavily about it. Your naming system, I like it.

There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton

Collapse
gadse profile image
Peter

I don't know who it was, but someone once added off-by-one errors to the list. Of course - without incrementing the cardinality counter. :)

Collapse
starbist profile image
Silvestar Bistrović Author

I too was giving too much attention to naming things. With this approach, I don't bother anymore.

Collapse
starbist profile image
Silvestar Bistrović Author

One of the most famous quotes about programming. 👍

Collapse
estebanrocha profile image
Esteban Rocha

I like it! Nice idea, I'll definitively try this out.

Collapse
starbist profile image
Silvestar Bistrović Author

I hope you will like it once you use it. 👍

Collapse
imkremen profile image
Vladimir Grebnev

Why it's better than numbers?

Example:
$color-1: #12e09f;
$color-2: #e01258;
$color-3: #f5f5f5;
$color-4: #1f1f1f;
$color-5: #fff;

Collapse
starbist profile image
Silvestar Bistrović Author

I have tried that I have a couple of problems. First, I couldn't remember which number stands for what. Numbers are not that memorable. Second, when trying to search for '1', I got a billion results.