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 on a daily basis. M stands for modifiers. A modifier represents a variation of an element, generally speaking. BEM 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 Then I created a new element modification, and named the new modifier alpha. 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; Why it works What is great about using Alpha, Beta, Gamma naming convention is that it separates the context from an element. Also, is widely used, so the chances that you already know some characters are pretty high. the Greek alphabet Let’s say we have a component with modifiers and 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 wouldn’t make sense anymore. We need to update the class name to This situation is a classic problem in the world of CSS. list list--red, list--green, list--blue list--red list-pink. If we use Alpha, Beta, Gamma convention, we would have these three classes: list--alpha, and list--beta, 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 and letters (last two letters of the alphabet) to name different or completely distinct variables or modifiers. For example, I am using for text color, and for white color. These are opposites of and which serves as theme/brand colors in my case. psi omega color-psi color-omega color-alpha, color-beta, color-gamma 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. 💬 Originally published at www.silvestarbistrovic.from.hr .

Alphabet

Building an animated sticky header with custom offset

Alpha, Beta, Gamma naming convention

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2018: My Technology Retrospective

BEM should not exist

CSS Block Element Modifier

Don't Go Crazy Because Of CSS Styles Conflicts

End CSS Conflicts With Block-Element-Modifier (BEM)

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

2018: My Technology Retrospective

BEM should not exist

CSS Block Element Modifier

Don't Go Crazy Because Of CSS Styles Conflicts

End CSS Conflicts With Block-Element-Modifier (BEM)

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps